Author: Edd Barrett <vex...@gmail.com>
Branch: ui_improvements
Changeset: r269:c6415f862f16
Date: 2015-05-01 11:41 +0100
http://bitbucket.org/pypy/jitviewer/changeset/c6415f862f16/

Log:    Various UI improvements.

        Display loop list as a table. Include columns for length, times
        executes, # of new ops, # of call ops. Display loop description in a
        more palatable manner. Unfloat the menu so it can't cover the traces
        (pet hate).

        Feedback welcomed.

diff --git a/_jitviewer/app.py b/_jitviewer/app.py
--- a/_jitviewer/app.py
+++ b/_jitviewer/app.py
@@ -91,6 +91,26 @@
         self.filename = filename
         self.storage = storage
 
+    def count_artefacts(self, loop):
+        calls = news = 0
+        for op in loop.operations:
+            if "call" in op.name:
+                calls += 1
+            if op.name.startswith("new"):
+                news += 1
+        return calls, news
+
+    def parse_repr(self, r):
+        elems = r.split(",")
+        title = elems[0]
+        if len(elems) == 1:
+            filenm = None
+            line = None
+        else:
+            filenm = elems[1]
+            line = elems[2]
+        return title, filenm, line
+
     def index(self):
         all = flask.request.args.get('all', None)
         loops = []
@@ -106,6 +126,11 @@
                 func = DummyFunc()
             func.count = getattr(loop, 'count', '?')
             func.descr = mangle_descr(loop.descr)
+            func.n_ops = len(loop.operations)
+
+            func.n_calls, func.n_news = self.count_artefacts(loop)
+            func.title, func.filenm, func.line = self.parse_repr(func.repr())
+
             loops.append(func)
         loops.sort(lambda a, b: cmp(b.count, a.count))
         if len(loops) > CUTOFF:
diff --git a/_jitviewer/static/style.css b/_jitviewer/static/style.css
--- a/_jitviewer/static/style.css
+++ b/_jitviewer/static/style.css
@@ -1,5 +1,6 @@
 /*HTML5 Reset*/
-a,abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{
 margin:0; padding:0; border:0; font-size:100%; font-weight:inherit; 
font-style:inherit; 
vertical-align:baseline}article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{
 display:block}a,ins,del{ text-decoration:none}ul,ol{ list-style:none}table{ 
border-spacing:0; border-collapse:collapse}caption,th{ 
text-align:left}q:after,q:before{ content:&#65533;&#65533;}
+/*a,abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{
 margin:0; padding:0; border:0; font-size:100%; font-weight:inherit; 
font-style:inherit; 
vertical-align:baseline}article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{
 display:block}a,ins,del{ text-decoration:none}ul,ol{ list-style:none}table{ 
border-spacing:0; border-collapse:collapse}caption,th{ 
text-align:left}q:after,q:before{ content:&#65533;&#65533;}
+ * */
 /*End of HTML5 Reset*/
 
 /* General Layout & Typography 
@@ -69,14 +70,14 @@
 #main {
        display: block;
     float: left;
-    width: 90%;
+    width: 97%;
     margin-left: 30px;
 }
 header {
        display: block;
-       width: 360px;
+       /*width: 95%; */
        
-       position: fixed;
+       /*position: fixed; */
        top: 10px;
        right: 10px;
        
@@ -137,9 +138,10 @@
                -moz-box-shadow: 0px 0px 7px #cacaca;
                -webkit-box-shadow: 0px 0px 7px #cacaca;
                box-shadow: 0px 0px 7px #cacaca;
-    margin-left: 100px;
+    /*margin-left: 100px;
     padding-bottom: 5px;
     padding-top: 5px;
+    */
 }
 
 .single-operation {
@@ -249,5 +251,23 @@
     font-size: 25px;
 }
 
+th {
+    text-align: left;
+    background-color: #cccccc;
+}
+
+tr:nth-child(even) {
+    background-color: #dddddd;
+}
+
+table {
+       font-size: small;
+       border-spacing: 3px;
+}
+
+.count {
+       text-align: right;
+}
+
 /* End of Formatting 
 -----------------------------------------*/
diff --git a/_jitviewer/templates/index.html b/_jitviewer/templates/index.html
--- a/_jitviewer/templates/index.html
+++ b/_jitviewer/templates/index.html
@@ -19,6 +19,7 @@
   </script>
 </head>
 <body>
+  <h1>JIT Viewer</h1>
   <header>
     <div class="menu">Menu</div>
     <a id="asmtoggler" href="#">Show assembler [a]</a><br>
@@ -26,7 +27,6 @@
     <div id="callstack">
     </div>
   </header>
-  <h1>JIT Viewer</h1>
   <!--
   <div id="title">
     <span id="title-text">JIT viewer</span>
@@ -36,11 +36,23 @@
       Filter [/]: <input id="inp-bar" type="text" size="80"></input>
   <div>
   <div id="loops">
-    <ul>
+    <table>
+           <tr style="background-color: 
#cccccc;"><th>Loop</th><th>execs</th><th>ops</th><th>news</th><th>calls</th></tr>
       {% for item in loops %}
-      <li class="loopitem" id="{{item.descr}}" name="{{item.repr()}}"><span><a 
href="#" data-name="{{ item.descr }}">{{item.repr()}}</a> run {{item.count}} 
times</span></li>
+      <tr class="loopitem" id="{{item.descr}}" name="{{item.repr()}}">
+             <!--<li class="loopitem" id="{{item.descr}}" 
name="{{item.repr()}}"><span><a href="#" data-name="{{ item.descr 
}}">{{item.repr()}}</a> run {{item.count}} times</span></li>-->
+             <td>
+                     <i><a href="#" data-name="{{ item.descr 
}}">{{item.title}}</a></i>
+                 {% if item.filenm %}
+                 <br />&nbsp;&nbsp;&nbsp;&nbsp;{{item.filenm}}
+                 {% endif %}
+                 {% if item.line %}
+                 <br />&nbsp;&nbsp;&nbsp;&nbsp;{{item.line}}
+                 {% endif %}
+             </td><td class="count">{{item.count}}</td><td 
class="count">{{item.n_ops}}</td><td class="count">{{item.n_news}}</td><td 
class="count">{{item.n_calls}}</td>
+      </tr>
       {% endfor %}
-    </ul>
+    </table>
     {% if extra_data %}
       <a href="/?all=true">{{extra_data}}</a>
     {% endif %}
_______________________________________________
pypy-commit mailing list
pypy-commit@python.org
https://mail.python.org/mailman/listinfo/pypy-commit

Reply via email to