tensor-compiler
diff --git a/‎codegen.html
Lines changed: 32 additions & 2 deletions b/‎codegen.html
Lines changed: 32 additions & 2 deletions
diff --git a/‎images/dense.png
6.53 KB b/‎images/dense.png
6.53 KB
diff --git a/‎images/singleton.png
9.23 KB b/‎images/singleton.png
9.23 KB
diff --git a/‎images/sparse.png
19 KB b/‎images/sparse.png
19 KB
diff --git a/‎stylesheets/style.css
Lines changed: 22 additions & 0 deletions b/‎stylesheets/style.css
Lines changed: 22 additions & 0 deletions
@@ -22,6 +22,12 @@
     <script src="javascripts/FileSaver.min.js"></script>
     <script src="javascripts/parser.js"></script>
     <script src="javascripts/demo.js"></script>
+    <script type="text/x-mathjax-config">
+      MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
+    </script>
+    <script type="text/javascript"
+      src="http://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
+    </script>
   </head>
   <body>
     <!-- Always shows a header, even in smaller screens. -->
@@ -79,14 +85,38 @@ <h6 style="margin-bottom: 0px; margin-top: 18px">Input a tensor algebra expressi
               <table class="mdl-data-table mdl-js-data-table" style="width: 100%; margin-bottom: 8px">
                 <thead>
                   <tr>
-                    <th class="mdl-data-table__cell--non-numeric" width="100"><div align="center" style="position:relative"><big>Tensor</big></div></th>
+                    <th class="mdl-data-table__cell--non-numeric" width="100">
+                      <div align="center" style="position:relative"><big>Tensor</big></div></th>
                     <th class="mdl-data-table__cell--non-numeric" width="120px" 
                       style="padding-left: 0px">
                       <div style="display:inline"><big>Format&nbsp;</big></div>
                     </th>
                     <th class="mdl-data-table__cell--non-numeric" style="padding-left: 7px">
                       <div style="display:inline"><big>Level Formats&nbsp;</big></div>
-                      <div style="display:inline">(reorder dimensions by dragging the drop-down menus)</div>
+                      <div style="display:inline; margin-right:10px">(reorder dimensions by dragging the drop-down menus)</div>
+                      <div style="display:inline; vertical-align: middle">
+                        <button id="btnHelp" class="help-btn mdl-button mdl-js-button mdl-button--icon">
+                          <i class="material-icons" style="font-size:20px">help_outline</i>
+                        </button>
+                        <div id="helpMenu" class="help-menu mdl-menu mdl-js-menu mdl-js-ripple-effect" for="btnHelp">
+                          <p>
+                            <strong>Dense</strong> levels store the size of the dimension $(N)$ and encode the coordinates in the interval $[0, N)$.
+                            <img src="images/dense.png" class="centered-img" style="height: 35px">
+                          </p>
+                          <p>
+                            <strong>Sparse</strong> levels store coordinates in a segment of the $\texttt{crd}$ array, with segment bounds stored in the $\texttt{pos}$ array.
+                            <img src="images/sparse.png" class="centered-img" style="height: 60px">
+                          </p> 
+                          <p>
+                            <strong>Singleton</strong> levels store individual coordinates (with no siblings) in the $\texttt{crd}$ array.
+                            <img src="images/singleton.png" class="centered-img" style="height: 40px">
+                          </p>
+                          <p> 
+                            A level is <strong>unique (U)</strong> if no collection of coordinates that share the same ancestors contains duplicates, and it is <strong>not unique (&not;U)</strong> otherwise.
+                          </p>
+                          <p style="margin-bottom: 0"> More info on taco's tensor formats can be found <a href="http://tensor-compiler.org/chou-oopsla18-taco-formats.pdf">here</a>.</p>
+                        </div>
+                      </div>
                     </th>
                   </tr>
                 </thead>
 
@@ -190,4 +190,26 @@ a{
 .demo-btn {
   width: 100%;
   font-weight: 400;
+}
+
+.help-btn {
+  width: 22px;
+  height: 22px;
+  min-width: initial;
+}
+
+.help-menu {
+  padding: 10px;
+  width: 360px;
+  color: black;
+}
+
+.help-menu p {
+  white-space: initial;
+}
+
+.centered-img {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
 }