Skip to content

Commit

Permalink
Speedup the VizIR HTML. (#7713)
Browse files Browse the repository at this point in the history 
* From 12s to 2s, by eliminating the bulk of the $() calls.

* Speed up recursive depth function by not using jQuery.

* Changed out CodeMirror for Speed-Highlight. Additionally several fixes regarding the StmtViz.

---------

Co-authored-by: Steven Johnson <srj@google.com>
  • Loading branch information
@mcourteaux @steven-johnson
mcourteaux and steven-johnson authored Aug 4, 2023
1 parent bc30d6f commit 48b3df6
Show file tree
Hide file tree
Showing 4 changed files with 100 additions and 80 deletions.
50 changes: 41 additions & 9 deletions src/StmtToViz.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -879,6 +879,11 @@ class HTMLCodePrinter : public IRVisitor {
stream << "</a>";
}

// Prints newline to stream
void print_ln() {
stream << '\n';
}

// Prints a variable to stream
void print_variable(const std::string &x) {
stream << variable(x);
Expand Down Expand Up @@ -1459,18 +1464,22 @@ class HTMLCodePrinter : public IRVisitor {
scope.push(op->name, gen_unique_id());
print_opening_tag("div", "LetStmt");
print_cost_buttons(op);
print_opening_tag("p", "WrapLine");
print_opening_tag("div", "WrapLine");
print_opening_tag("span", "cost-highlight", "cost-bg-" + std::to_string(id));
print_opening_tag("span", "matched");
print_html_element("span", "keyword", "let ");
print_variable(op->name);
print_html_element("span", "Operator Assign", " = ");
print_closing_tag("span");
print_closing_tag("span"); // matched
print(op->value);
print_closing_tag("span");
print_closing_tag("p");
print(op->body);
print_closing_tag("span"); // Cost-Highlight
print_closing_tag("div"); // WrapLine
print_closing_tag("div");
print_ln();
// Technically, the body of the LetStmt is a child node in the IR
// tree, but moving it out of the <div> doesn't make any difference to
// the rendering, and significantly reduces DOM depth.
print(op->body);
scope.pop(op->name);
}

Expand All @@ -1479,6 +1488,7 @@ class HTMLCodePrinter : public IRVisitor {
print_cost_buttons(op);
print_function_call("assert", {op->condition, op->message});
print_closing_tag("div");
print_ln();
}

void visit(const ProducerConsumer *op) override {
Expand Down Expand Up @@ -1530,6 +1540,8 @@ class HTMLCodePrinter : public IRVisitor {
// Close div holding this producer/consumer
print_closing_tag("div");

print_ln();

// Pop out of loop scope
scope.pop(op->name);
}
Expand Down Expand Up @@ -1590,6 +1602,8 @@ class HTMLCodePrinter : public IRVisitor {
// Close div holding this for loop
print_closing_tag("div");

print_ln();

// Pop out of loop scope
scope.pop(op->name);
}
Expand Down Expand Up @@ -1639,6 +1653,8 @@ class HTMLCodePrinter : public IRVisitor {

// Close div holding this acquire
print_closing_tag("div");

print_ln();
}

void visit(const Store *op) override {
Expand Down Expand Up @@ -1672,6 +1688,8 @@ class HTMLCodePrinter : public IRVisitor {

// Close div holding this store
print_closing_tag("div");

print_ln();
}

void visit(const Provide *op) override {
Expand All @@ -1690,6 +1708,8 @@ class HTMLCodePrinter : public IRVisitor {
print(op->values[0]);
}
print_closing_tag("div");

print_ln();
}

void visit(const Allocate *op) override {
Expand Down Expand Up @@ -1752,13 +1772,16 @@ class HTMLCodePrinter : public IRVisitor {
print_visualization_button("allocate-viz-" + std::to_string(id));

// Print allocation body
print_ln();
print_opening_tag("div", "AllocateBody");
print(op->body);
print_closing_tag("div");

// Close dive holding the allocate
print_closing_tag("div");

print_ln();

// Pop out of allocate scope
scope.pop(op->name);
}
Expand All @@ -1769,6 +1792,7 @@ class HTMLCodePrinter : public IRVisitor {
print_html_element("span", "keyword", "free ");
print_variable(op->name);
print_closing_tag("div");
print_ln();
}

void visit(const Realize *op) override {
Expand Down Expand Up @@ -1842,6 +1866,7 @@ class HTMLCodePrinter : public IRVisitor {
print_block_stmt(op->first);
print_block_stmt(op->rest);
print_closing_tag("div");
print_ln();
}

void visit(const Fork *op) override {
Expand Down Expand Up @@ -1880,6 +1905,7 @@ class HTMLCodePrinter : public IRVisitor {

// Close div holding this fork
print_closing_tag("div");
print_ln();
}

void visit(const IfThenElse *op) override {
Expand Down Expand Up @@ -1928,6 +1954,7 @@ class HTMLCodePrinter : public IRVisitor {

// Close indented div holding `then` case
print_closing_tag("div");
print_ln();

// Close code block holding `then` case
print_html_element("span", "matched ClosingBrace cb-" + std::to_string(then_block_id), "}");
Expand Down Expand Up @@ -2005,6 +2032,7 @@ class HTMLCodePrinter : public IRVisitor {

// Close indented div holding `else` case
print_closing_tag("div");
print_ln();

// Close code block holding `else` case
print_html_element("span", "matched ClosingBrace cb-" + std::to_string(else_block_id), "}");
Expand All @@ -2015,6 +2043,7 @@ class HTMLCodePrinter : public IRVisitor {

// Close div holding the conditional
print_closing_tag("div");
print_ln();
}

void visit(const Evaluate *op) override {
Expand All @@ -2023,10 +2052,10 @@ class HTMLCodePrinter : public IRVisitor {
print_cost_buttons(op);
print(op->value);
print_closing_tag("div");
print_ln();
}

void visit(const Shuffle *op) override {
print_opening_tag("div", "Block");
if (op->is_concat()) {
print_function_call("concat_vectors", op->vectors);
} else if (op->is_interleave()) {
Expand All @@ -2048,14 +2077,14 @@ class HTMLCodePrinter : public IRVisitor {
}
print_function_call("shuffle", args);
}
print_closing_tag("div");
}

void visit(const VectorReduce *op) override {
print_opening_tag("div", "VectorReduce");
print_type(op->type);
print_function_call("vector_reduce", {op->op, op->value});
print_closing_tag("div");
print_ln();
}

void visit(const Prefetch *op) override {
Expand Down Expand Up @@ -2092,6 +2121,7 @@ class HTMLCodePrinter : public IRVisitor {
print_closing_tag("div");

print_closing_tag("div");
print_ln();
}

void visit(const Atomic *op) override {
Expand Down Expand Up @@ -2134,6 +2164,7 @@ class HTMLCodePrinter : public IRVisitor {

// Close div holding this atomic
print_closing_tag("div");
print_ln();
}
};

Expand Down Expand Up @@ -2781,6 +2812,7 @@ class IRVisualizer {
html_viz_printer.init_cost_info(cost_model);

// Generate html page
stream << "<!DOCTYPE html>\n";
stream << "<html>\n";
generate_head(m);
generate_body(m);
Expand Down Expand Up @@ -2864,7 +2896,7 @@ class IRVisualizer {
// Generate tab 3/3: Generated assembly code
void generate_assembly_tab(const Module &m) {
stream << "<div id='assembly-tab'>\n";
stream << "<div id='assemblyContent' style='display: none;'>\n";
stream << "<div id='assemblyContent' class='shj-lang-asm'>\n";
stream << "<pre>\n";
stream << asm_stream.str();
stream << "</pre>\n";
Expand Down Expand Up @@ -2943,4 +2975,4 @@ void print_to_viz(const std::string &html_output_filename,
}

} // namespace Internal
} // namespace Halide
} // namespace Halide
18 changes: 11 additions & 7 deletions src/irvisualizer/StmtToViz_dependencies.template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,14 @@

<script src='http://code.jquery.com/jquery-1.10.2.js'></script>

<!-- Assembly Code links -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.css'></link>
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/gas/gas.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/selection/mark-selection.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/search/searchcursor.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/search/search.min.js'></script>

<!-- Assembly Code links (Speed Highlight) -->
<script type="module">
import { highlightAll } from 'https://cdn.jsdelivr.net/gh/speed-highlight/core/dist/index.js';
import 'https://cdn.jsdelivr.net/gh/speed-highlight/core/dist/languages/asm.js';
highlightAll();
</script>
<!-- adapted from the default style from: https://unpkg.com/@speed-highlight/core@1.1.11/dist/themes/default.css -->
<style type='text/css'>
[class*=shj-lang-]{white-space:pre;background:white;color:#112;box-shadow:0 0 5px #0001;text-shadow:none;font: 12px Consolas,Courier New,Monaco,Andale Mono,Ubuntu Mono,monospace;line-height:14px;box-sizing:border-box;max-width:min(100%,100vw)}.shj-inline{margin:0;padding:2px 5px;display:inline-block;border-radius:5px}[class*=shj-lang-]::selection,[class*=shj-lang-] ::selection{background:#bdf5}[class*=shj-lang-]>div{display:flex;overflow:auto}[class*=shj-lang-]>div :last-child{flex:1;outline:none}.shj-numbers{padding-left:5px;counter-reset:line}.shj-numbers div{padding-right:5px}.shj-numbers div:before{color:#999;display:block;content:counter(line);opacity:.5;text-align:right;margin-right:5px;counter-increment:line}.shj-syn-cmnt{font-style:italic}.shj-syn-err,.shj-syn-kwd{color:#e16}.shj-syn-num,.shj-syn-class{color:#f60}.shj-numbers,.shj-syn-cmnt{color:#999}.shj-syn-insert,.shj-syn-str{color:#7d8}.shj-syn-bool{color:#3bf}.shj-syn-type,.shj-syn-oper{color:#5af}.shj-syn-section,.shj-syn-func{color:#84f}.shj-syn-deleted,.shj-syn-var{color:#f44}.shj-oneline{padding:12px 10px}.shj-lang-http.shj-oneline .shj-syn-kwd{background:#25f;color:#fff;padding:5px 7px;border-radius:5px}.shj-multiline.shj-mode-header{padding:20px}.shj-multiline.shj-mode-header:before{content:attr(data-lang);color:#58f;display:block;padding:10px 20px;background:#58f3;border-radius:5px;margin-bottom:20px}
</style>
Loading

0 comments on commit 48b3df6

Please sign in to comment.