viral_seq 1.2.9 → 1.6.0

data/bin/tcs_log

@@ -16,6 +16,7 @@ require 'viral_seq'
 require 'pathname'
 require 'json'
 require 'fileutils'
+require 'csv'
 
 indir = ARGV[0].chomp
 indir_basename = File.basename(indir)
@@ -26,6 +27,7 @@ Dir.mkdir(tcs_dir) unless File.directory?(tcs_dir)
 
 libs = []
 Dir.chdir(indir) {libs = Dir.glob("*")}
+libs.sort_by! {|lib| lib.split("-")[1].to_i}
 
 outdir2 = File.join(tcs_dir, "combined_TCS_per_lib")
 outdir3 = File.join(tcs_dir, "TCS_per_region")
@@ -53,18 +55,26 @@ header = %w{
   Resampling_index
   Combined_TCS
   Combined_TCS_after_QC
+  Detection_Sensitivity
   WARNINGS
 }
 
+pid_dist_data = {}
+
 log.puts header.join(',')
 libs.each do |lib|
   Dir.mkdir(File.join(outdir2, lib)) unless File.directory?(File.join(outdir2, lib))
   fasta_files = []
   json_files = []
+  pid_json_files = []
+  pid_dist_data[lib] = {}
+
   Dir.chdir(File.join(indir, lib)) do
      fasta_files = Dir.glob("**/*.fasta")
      json_files = Dir.glob("**/log.json")
+     pid_json_files = Dir.glob("**/primer_id.json")
   end
+
   fasta_files.each do |f|
     path_array = Pathname(f).each_filename.to_a
     region = path_array[0]
@@ -81,6 +91,14 @@ libs.each do |lib|
 
   json_files.each do |f|
     json_log = JSON.parse(File.read(File.join(indir, lib, f)), symbolize_names: true)
+    tcs_number = json_log[:total_tcs]
+    if json_log[:combined_tcs]
+      tcs_number = json_log[:combined_tcs]
+      if json_log[:combined_tcs_after_qc]
+        tcs_number = json_log[:combined_tcs_after_qc]
+      end
+    end
+
     log.print [lib,
                json_log[:primer_set_name],
                json_log[:total_raw_sequence],
@@ -95,8 +113,604 @@ libs.each do |lib|
                json_log[:resampling_param],
                json_log[:combined_tcs],
                json_log[:combined_tcs_after_qc],
+               ViralSeq::TcsCore::detection_limit(tcs_number.to_i),
                json_log[:warnings],
              ].join(',') + "\n"
   end
+
+  pid_json_files.each do |f|
+    pid_json = JSON.parse(File.read(File.join(indir, lib, f)), symbolize_names: true)
+    region = Pathname(f).each_filename.to_a[-2]
+    pid_dist = {}
+    pid_json[:primer_id_distribution].each {|k,v| pid_dist[k.to_s.to_i] = v}
+    pid_dist_data[lib][region] = pid_dist
+  end
 end
 log.close
+
+# Create HTML page with charts from log.csv above
+
+class String
+    def var_safe
+        gsub '-',''
+    end
+    def shorten_html
+        gsub /\n/, ''
+        gsub /\t/, ''
+    end
+end
+
+colors = ["#332288", "#117733", "#44AA99", "#88CCEE", "#DDCC77", "#CC6677", "#AA4499", "#882255"]
+bool_colors = { true => colors[3], false => colors[5] }
+
+#hold vars for csv input
+raw_sequence_data = ["['Library Name', 'Raw Sequences', { role: 'annotation' }]"]
+lib_names = []
+total_reads = 0
+max_region_char_length = 5
+lib_data = {}
+batch_name = ""
+region_colors = {"Other" => "#808080"}
+
+CSV.foreach(log_file).each_with_index do |row, i|
+    next if i == 0 || row[0] == nil
+
+    lib_name = row[0]
+    region = row[1]
+    raw_sequences_per_barcode = row[2].to_i
+
+    if not region_colors.key?(region)
+        region_colors[region] = colors[region_colors.length % (colors.length - 1)]
+    end
+
+    if region.length > max_region_char_length + 2
+        max_region_char_length = region.length + 2
+    end
+
+    if batch_name == ""
+        batch_name = lib_name.split('-')[0]
+    end
+
+    if not lib_names.include? lib_name
+        lib_names.push(lib_name)
+        total_reads += raw_sequences_per_barcode
+        raw_sequence_data.push("['#{lib_name}', #{raw_sequences_per_barcode}, '#{raw_sequences_per_barcode}']")
+        lib_data[lib_name] = {}
+    end
+
+    lib_data[lib_name][region] = {
+        'lib_name' => lib_name,
+        'region' => region,
+        'raw_sequences_per_barcode' => raw_sequences_per_barcode,
+        'r1_raw' => row[3].to_i,
+        'r2_raw' => row[4].to_i,
+        'paired_raw' => row[5].to_i,
+        'cutoff' => row[6].to_i,
+        'consensus2' => row[9].to_i,
+        'distinct_to_raw' => row[10].to_f,
+        'resampling_index' => row[11].to_f,
+        'combined_TCS' => row[12].to_i,
+        'combined_TCS_after_QC' => row[13].to_i,
+        'detection_sensitivity' => row[14].to_f,
+        'warnings' => row[15].to_s || ""
+    }
+end
+
+#format output
+total_reads = total_reads.to_s.reverse.gsub(/(\d{3})(?=\d)/, '\\1,').reverse
+raw_sequence_data = "[" + raw_sequence_data.join(',') + "]"
+lib_names = lib_names.sort_by { |s| [s.split("-")[0], s.split("-")[1].to_i] }
+
+#calculate 'other'
+lib_data.each do |lib, data|
+    sum = data.values.reduce(0) { |sum, obj| sum + obj['paired_raw'] }
+    raw_sequences_per_barcode = data[data.keys.first]['raw_sequences_per_barcode']
+    other = raw_sequences_per_barcode - sum
+    data['other'] = {
+        "region" => "Other",
+        "paired_raw" => other,
+        "raw_sequences_per_barcode" => raw_sequences_per_barcode
+    }
+end
+
+#process each library's html
+library_links = "
+    <ul>
+        <li id='link_basic-statistics' class='pointer current_page' onclick='showPage(\"basic-statistics\")'>Basic Statistics</li>
+        <li>Libraries
+            <ul style='margin-left: 16px;'>" + lib_names.map { |lib_name| "
+                <li id='link_#{lib_name}' class='pointer' onclick='showPage(\""+lib_name+"\")'>"+lib_name+"</li>"
+                }.join + "
+            </ul>
+        </li>
+    </ul>
+"
+
+library_pages = lib_names.map { |lib_name|
+    "<div id='"+lib_name+"' class='page hidden'>
+        <div class='error-message'></div>
+        <div style='display: flex; gap: 16px; min-height: 45vh;'>
+            <div class='card' style='flex: 1; display: flex; flex-direction: column;'>
+                <h2>Distribution of Raw Sequencing Reads</h2>
+                <div class='pie_chart' style='flex: 1;'></div>
+            </div>
+            <div class='card' style='display: flex; align-items: center; justify-content: center; flex-direction: column; flex: 1;'>
+                " + lib_data[lib_name].map{ |lib, data| data['region'] == "Other" ? "" : "
+                    <div class='#{data['region']}' style='display: flex; align-items: center;'>
+                        <div style='width: #{max_region_char_length.to_s}ch;'>#{data['region']}</div>
+                        <div class='treemap' style='flex: 1; height: #{90 / lib_data[lib_name].length}vh;'></div>
+                    </div>
+                " }.join + "
+            </div>
+        </div>
+        <div class='card'>
+            <h2 style='margin: 32px;'>Number of TCS at Regions</h2>
+            <div class='tcs_bar_chart'></div>
+            <div class='tcs_warnings' style='text-align: center;color: red;font-weight: bold;margin-left: 24px;'><strong></strong></div>
+        </div>
+        <div class='card'>
+            <h2>Detection Sensitivity</h2>
+            <p><i>The lowest abundance of minority mutations that can be detected with 95% confidence</i></p>
+            <div class='detection_sensitivity_chart'></div>
+        </div>
+        <div class='card'>
+            <h2 style='text-align: center;'>Distinct to Raw</h2>
+            <p><i>Distinct to Raw greater than 0.1 suggests more raw sequences are required to fully recover TCS</i></p>
+            <div class='raw_bar_chart'></div>
+        </div>
+        <div class='card'>
+            <h2>Resampling Index</h2>
+            <p><i>Resampling index less than 0.9 suggests Primer ID resampling</i></p>
+            <div class='resampling_bar_chart'></div>
+        </div>
+        <div class='card'>
+            <h2>Primer ID bin size distribution</h2>
+            <p><i>Red vertical line shows the consensus cut-off value</i></p>
+            " + lib_data[lib_name].map{ |lib, data| data['region'] == "Other" ? "" : "
+                <div class='#{data['region']} scatter' style='height: #{90 / 3}vh;'></div>
+            " }.join + "
+        </div>
+    </div>"
+}.join
+
+#format lib_data into charts
+paired_raw = {}
+tree_charts = {}
+tcs_bar_chart = {}
+distinct_bar_chart = {}
+resampling_bar_chart = {}
+detection_sensitivity_chart = {}
+
+lib_data.each do |lib, data|
+    paired_raw[lib] = {}
+
+    paired_raw[lib]['data'] = "
+        [
+            ['Region', 'Paired Raw'], " +
+            data.map { |lib, d| "
+                ['#{d['region']},#{d['paired_raw']}', #{d['paired_raw']}],
+            " }.join + "
+        ]
+    "
+
+    paired_raw[lib]['slices'] = "[#{
+        data.map{ |lib, d| "{color: '#{region_colors[d['region']]}'}" }.join(',')
+    }]"
+
+    paired_raw[lib]['residuel_text'] = data.map { |lib, d|
+        (d['paired_raw'].to_f / d['raw_sequences_per_barcode'].to_f) < (0.5/360) ?
+            "#{d['region']},#{d['paired_raw']}" :
+            nil
+    }.compact.join(" - ")
+
+    tree_charts[lib] = {}
+    data.each do |region, d|
+        if region != "other"
+            tree_charts[lib][region] = "
+                [
+                    ['Location', 'Parent', 'r'],
+                    ['Global', null,0],
+                    ['R1_Raw', 'Global', #{d['r1_raw'].to_s}],
+                    ['R2_Raw', 'Global', #{d['r2_raw'].to_s}],
+                    ['Paired_Raw', 'Global', #{d['paired_raw'].to_s}],
+                ]
+            "
+        end
+    end
+
+    has_c = data.values.inject(0) {|sum, h| sum + (h['combined_TCS'] == nil ? 0 : h['combined_TCS']) } > 0
+    has_qc = data.values.inject(0) {|sum, h| sum + (h['combined_TCS_after_QC'] == nil ? 0 : h['combined_TCS_after_QC']) } > 0
+
+    tcs_bar_chart[lib] = {
+        'data' => "
+            [
+                [
+                    'Region',
+                    'TCS',
+                    #{has_c ? "'Combined TCS'," : ''}
+                    #{has_qc ? "'TCS After QC'," : ''}
+                ],
+                " + data.map{ |region, d| d['region'] === "Other" ? "" : "
+                [
+                    '#{d['region']}#{d['warnings'].length > 0 ? '*' : ''}',
+                    #{d['consensus2']}  ,
+                    #{has_c ? "#{d['combined_TCS']}," : ''}
+                    #{has_qc ? "#{d['combined_TCS_after_QC']}," : ''}
+                ],
+                " }.join + "
+            ]
+        ",
+        'warnings' => data.map{ |region, d|
+            d['region'] != "Other" && d['warnings'].length > 0 ? "#{region} - #{d["warnings"]}<br/>" : ''
+        }.join
+    }
+
+    detection_sensitivity_chart[lib] = "[
+        ['Region', 'Detection Sensitivity'],
+        #{ data.map{ |region, d|
+            d['region'] == 'Other' ? "" : "['#{d['region']}', #{d['detection_sensitivity']}]"
+        }.join(',') }
+    ]"
+
+    distinct_bar_chart[lib] = "
+        [
+            ['Region','Distinct to Raw', {role: 'style'}],
+            "+ data.map{ |region, d| d['region'] == 'Other' ? "" : "
+            [
+                '#{d['region']}', #{d['distinct_to_raw']}, '#{bool_colors[d['distinct_to_raw'].to_f < 0.1]}'
+            ],"}.join + "
+        ]
+    "
+
+    resampling_bar_chart[lib] = "
+        [
+            ['Region','Resampling Index', {role: 'style'}],
+            "+ data.map{ |region, d| d['region'] == 'Other' ? "" : "
+            [
+                '#{d['region']}', #{d['resampling_index']}, '#{bool_colors[d['resampling_index'].to_f > 0.9]}'
+            ]," }.join + "
+        ]
+    "
+end
+
+scatter_charts = {}
+
+pid_dist_data.each do |lib, data|
+    scatter_charts[lib] = {}
+    data.each do |region, d|
+        max_x = d.max_by{|index, distribution| distribution }[1]
+        max_x = "1#{ max_x.to_s.chars.map{ |c| "0"}.join }"
+        scatter_charts[lib][region] = "[
+            ['Index', 'Distribution', 'Cutoff'],
+            [#{lib_data[lib][region]['cutoff'].to_s}, null, 0],
+            [#{lib_data[lib][region]['cutoff'].to_s}, null, #{max_x}],
+            #{d.map{ |index, distribution| "[#{index}, #{distribution}, null]" }.join(',') },
+        ]"
+    end
+end
+
+#create JS that initializes charts
+paired_raw_js = paired_raw.map { |lib, data| '
+    var element_pie_'+lib.var_safe+' = document.querySelector("#'+lib+' .pie_chart")
+    if(isVisible(element_pie_'+lib.var_safe+')){
+        var chart_pie_'+lib.var_safe+' = new google.visualization.PieChart(element_pie_'+lib.var_safe+');
+        chart_pie_'+lib.var_safe+'.draw(
+            google.visualization.arrayToDataTable('+data['data']+'),
+            {
+                title: "Paired Raw",
+                titleTextStyle: {
+                    fontSize: 18
+                },
+                pieSliceText: "label",
+                slices: ' + data['slices'] + ',
+                legend: {
+                    position: "left",
+                    alignment: "center"
+                },
+                chartArea: {
+                    width: "100%",
+                    height: "100%"
+                },
+                ' + (data['residuel_text'].length > 0 ? "pieResidueSliceLabel: '#{data['residuel_text']}'" : "") + '
+            }
+        );
+    }
+' }.join
+
+tree_charts_js = tree_charts.map { |lib, d|
+    d.map { |region, data| '
+        var element_chart_tree_'+lib.var_safe+'_'+region.var_safe+' = document.querySelector("#'+lib+' .'+region+' .treemap")
+        if(isVisible(element_chart_tree_'+lib.var_safe+'_'+region.var_safe+')){
+            var chart_tree_'+lib.var_safe+'_'+region.var_safe+' = new google.visualization.TreeMap(element_chart_tree_'+lib.var_safe+'_'+region.var_safe+');
+            chart_tree_'+lib.var_safe+'_'+region.var_safe+'.draw(
+                google.visualization.arrayToDataTable('+data+'),
+                {
+                    headerHeight: 0,
+                    minColor: "' + colors[1] + '",
+                    maxColor: "' + colors[5] + '",
+                    fontColor: "#fff",
+                }
+            );
+            google.visualization.events.addListener(chart_tree_'+lib.var_safe+'_'+region.var_safe+', "select", function () {
+                chart_tree_'+lib.var_safe+'_'+region.var_safe+'.setSelection([]);
+            });
+        }
+    '}
+}.join
+
+tcs_bar_chart_js = tcs_bar_chart.map { |lib, data| '
+    var element_tcs_bar_chart_'+lib.var_safe+' = document.querySelector("#'+lib+' .tcs_bar_chart")
+    if(isVisible(element_tcs_bar_chart_'+lib.var_safe+')){
+        var tcs_bar_chart_'+lib.var_safe+' = new google.charts.Bar(element_tcs_bar_chart_'+lib.var_safe+');
+        tcs_bar_chart_'+lib.var_safe+'.draw(
+            google.visualization.arrayToDataTable('+data["data"]+'),
+            google.charts.Bar.convertOptions({
+                colors: ["' + colors[0] + '", "' + colors[1] + '", "' + colors[2] + '"],
+                legend: { position: "bottom" },
+                height: Math.round(window.innerHeight * .5),
+                chartArea: {
+                    width: "100%",
+                    height: "100%"
+                }
+            })
+        );
+        document.querySelector("#'+lib+' .tcs_warnings").innerHTML = "'+data['warnings']+'";
+    }
+' }.join
+
+detection_sensitivity_js = detection_sensitivity_chart.map { |lib, data| '
+    var element_detection_'+lib.var_safe+' = document.querySelector("#'+lib+' .detection_sensitivity_chart")
+    if(isVisible(element_detection_'+lib.var_safe+')){
+        var detection_'+lib.var_safe+' = new google.visualization.ColumnChart(element_detection_'+lib.var_safe+');
+        detection_'+lib.var_safe+'.draw(
+            google.visualization.arrayToDataTable('+data+'),
+            {
+                legend: {
+                    position: "none"
+                },
+                height: Math.round(window.innerHeight * .5),
+                colors: ["' + colors[3] + '"],
+                vAxis: {
+                      scaleType: "log",
+                      viewWindow: {
+                        min: 0.00001
+                      },
+                      ticks: [0.00001, 0.0001, 0.001, 0.01, 0.1, 1]
+                }
+            }
+        );
+    }
+'}.join
+
+distinct_bar_chart_js = distinct_bar_chart.map { |lib, data| '
+    var element_distinct_'+lib.var_safe+' = document.querySelector("#'+lib+' .raw_bar_chart")
+    if(isVisible(element_distinct_'+lib.var_safe+')){
+        var distinct_'+lib.var_safe+' = new google.visualization.ColumnChart(element_distinct_'+lib.var_safe+');
+        distinct_'+lib.var_safe+'.draw(
+            google.visualization.arrayToDataTable('+data+'),
+            {
+                legend: {
+                    position: "none"
+                },
+                height: Math.round(window.innerHeight * .5),
+            }
+        );
+    }
+' }.join
+
+resampling_bar_chart_js = resampling_bar_chart.map { |lib, data| '
+    var element_resampling_'+lib.var_safe+' = document.querySelector("#'+lib+' .resampling_bar_chart")
+    if(isVisible(element_resampling_'+lib.var_safe+')){
+        var resampling_'+lib.var_safe+' = new google.visualization.ColumnChart(element_resampling_'+lib.var_safe+');
+        resampling_'+lib.var_safe+'.draw(
+            google.visualization.arrayToDataTable('+data+'),
+            {
+                legend: {
+                    position: "none"
+                },
+                height: Math.round(window.innerHeight * .5),
+            }
+        );
+    }
+' }.join
+
+scatter_charts_js = scatter_charts.map { |lib, d|
+    d.map { |region, data| '
+        var element_chart_scatter_'+lib.var_safe+'_'+region.var_safe+' = document.querySelector("#'+lib+' .'+region+'.scatter")
+        if(isVisible(element_chart_scatter_'+lib.var_safe+'_'+region.var_safe+')){
+            var chart_scatter_'+lib.var_safe+'_'+region.var_safe+' = new google.visualization.ComboChart(element_chart_scatter_'+lib.var_safe+'_'+region.var_safe+');
+
+            var view_'+lib.var_safe+'_'+region.var_safe+' = new google.visualization.DataView(
+                google.visualization.arrayToDataTable(' + data + ')
+            );
+
+            chart_scatter_'+lib.var_safe+'_'+region.var_safe+'.draw(
+                view_'+lib.var_safe+'_'+region.var_safe+',
+                {
+                    pointSize: 5,
+                    title: "' + region + '",
+                    hAxis: {title: "Raw sequencing reads per unique PID"},
+                    vAxis: {
+                        title: "# of PIDs ",
+                        logScale: true
+                    },
+                    colors: ["' + bool_colors[true] + '"],
+                    legend: "none",
+                    seriesType: "scatter",
+                    series: {
+                        1: {
+                            type: "line",
+                            color: "' + bool_colors[false] + '",
+                            pointsVisible: false,
+                        }
+                    }
+                }
+            );
+        }
+    '}
+}.join
+
+html = '
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>TCS Log</title>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
+        <script src="https://www.gstatic.com/charts/loader.js"></script>
+        <script>
+            google.charts.load("current", {packages: ["corechart", "treemap", "bar"]});
+            google.charts.setOnLoadCallback(drawChart);
+
+            var isInit = false
+
+            function isVisible(el) {
+                return (el.offsetParent !== null)
+            }
+
+            function drawChart() {
+
+                document.querySelectorAll(".error-message").forEach(element => element.innerHTML = "")
+
+                if(! isInit){
+                    isInit = true;
+                    window.onresize = drawChart;
+                }
+
+                try{
+                    var element_home_chart = document.getElementById("raw-sequence-chart")
+                    if(isVisible(element_home_chart)){
+                        var home_chart = new google.visualization.ColumnChart(element_home_chart);
+                        home_chart.draw(
+                            google.visualization.arrayToDataTable('+raw_sequence_data+'),
+                            {
+                                annotations: {alwaysOutside: true},
+                                colors: ["' + bool_colors[true] + '"]
+                            }
+                        );
+                    }'+ paired_raw_js + tree_charts_js + tcs_bar_chart_js + distinct_bar_chart_js + resampling_bar_chart_js + detection_sensitivity_js + scatter_charts_js + '
+                }catch(e){
+                    console.log(e);
+                    document.querySelectorAll(".error-message").forEach(element =>
+                        element.innerHTML = "There was an error displaying your data.<br>To help us improve, please forward this html file to<br>shuntaiz@email.unc.edu"
+                    )
+                }
+            }
+
+            function showPage(pageID){
+                document.querySelectorAll(".page").forEach(element => element.classList.add("hidden"))
+                document.getElementById(pageID).classList.remove("hidden")
+
+                document.querySelectorAll(".current_page").forEach(element => element.classList.remove("current_page"));
+                document.getElementById("link_"+pageID).classList.add("current_page");
+
+                drawChart();
+            }
+        </script>
+    </head>
+    <body>
+        <div style="display: flex; flex-direction: column; height: 100vh; width: 100vw; position: fixed; overflow: hidden;">
+            <div style="display: flex; gap: 4px;">
+                <div id="nav" class="card" style="overflow: auto; min-height: 100vh; text-align: left; margin-top: 0;">
+                    <a href="https://primer-id.org" target="_BLANK">
+                        <h3 style="margin: 24px; font-weight: 600; color: #333 !important">TCS Log</h3>
+                    </a>
+                    '+library_links+'
+                </div>
+                <div id="pages" style="flex: 1; overflow: auto; height: 100vh;">
+                    <div style="display: flex; flex-direction: column; align-items: center; height: 100vh;" id="basic-statistics" class="page">
+                        <div class="error-message"></div>
+                        <div class="card" style="margin-top: 16px; width: 100%;">
+                            <table id="home-table">
+                                <tr>
+                                    <td>Batch Name</td>
+                                    <td>'+batch_name+'</td>
+                                </tr>
+                                <tr>
+                                    <td>Processed Time</td>
+                                    <td>'+Time.now.strftime("%m/%d/%Y")+'</td>
+                                </tr>
+                                <tr>
+                                    <td>TCS Version</td>
+                                    <td>'+ViralSeq::TCS_VERSION+'</td>
+                                </tr>
+                                <tr>
+                                    <td>viral_seq Version</td>
+                                    <td>'+ViralSeq::VERSION+'</td>
+                                </tr>
+                                <tr>
+                                    <td>Number of Libraries</td>
+                                    <td>'+lib_names.length.to_s+'</td>
+                                </tr>
+                                <tr>
+                                    <td>Total Reads</td>
+                                    <td>'+total_reads+'</td>
+                                </tr>
+                            </table>
+                        </div>
+                        <div class="card" style="margin-top: 16px; width: 100%;">
+                            <h2>Raw Sequences Distribution</h2>
+                            <div id="raw-sequence-chart"></div>
+                        </div>
+                    </div>
+                    '+library_pages+'
+                </div>
+            </div>
+        </div>
+    </body>
+    <style>
+        body {
+            font-size: 1.2rem;
+            color: #333;
+        }
+        #nav ul {
+            list-style-type: none;
+        }
+        .page {
+            margin: 16px;
+        }
+        .card {
+            padding: 16px;
+            text-align: center;
+        }
+        .hidden {
+            display: none !important;
+            visibility: hidden !important;
+        }
+        .pointer {
+            cursor: pointer;
+        }
+        #home-table {
+            margin: 0 auto;
+            width: 80%;
+            border-collapse: collapse;
+        }
+        #home-table, #home-table th, #home-table td {
+            border: 1px solid black;
+        }
+        #home-table td {
+            padding: 8px;
+        }
+        .current_page {
+            border-bottom: 1px solid blue;
+        }
+        .error-message {
+            background: red !important;
+            color: white;
+            border-radius: 15px;
+            font-weight: bold;
+            font-size: 1.8rem;
+            text-align: center;
+            padding: 1%;
+            margin: 16px auto;
+        }
+        .error-message:empty {
+            display: none;
+        }
+    </style>
+</html>
+'.shorten_html
+
+File.open(File.join(tcs_dir,"log.html"), 'w') { |file| file.write(html) }