Changed the theme of gprof2dot output to be more inline with rest of …

…silk design (#210)

* add .venv* to .gitignore

* Changed the theme of gprof2dot output to be more inline with the design of the rest of silk. Also increased the height to mak it a little more easier to visualize

silk/templates/silk/profile_detail.html

@@ -7,7 +7,6 @@
 {% block js %}
     <script type="text/javascript" src="{% static 'silk/lib/viz-lite.js' %}"></script>
     <script type="text/javascript" src="{% static 'silk/lib/svg-pan-zoom.min.js' %}"></script>
-    <script type="text/javascript" src="{% static 'silk/lib/sortable.js' %}"></script>
     {{ block.super }}
 {% endblock %}
 
@@ -68,26 +67,6 @@
         svg {
           display: block;
         }
-
-        .file-path {
-            font-size: 13px;
-        }
-
-        .file-path>a {
-            color: black;
-        }
-
-        .file-path>a:hover {
-            color: #9dd0ff;
-        }
-
-        .file-path>a:active {
-            color: #594F4F;
-        }
-
-        #pyprofile-table {
-            margin-top: 25px;
-        }
 
     </style>
 {% endblock %}
@@ -150,7 +129,7 @@
                         function (response) {
                             var svg = '#graph-div';
                             $(svg).html(Viz(response.dot));
-                            $(svg + ' svg').attr('width', 960).attr('height', 480);
+                            $(svg + ' svg').attr('width', 960).attr('height', 600);
                             svgPanZoom(svg + ' svg', { controlIconsEnabled: true });
                         }
                     );
@@ -164,38 +143,13 @@
                 <div class="heading">
                     <div class="inner-heading">Python Profiler</div>
                 </div>
-
                 <div class="description">
-                    Below is a dump from the cPython profiler.
-                    {% if silk_request.prof_file %}
-                    Click <a href="{% url 'silk:request_profile_download' request_id=silk_request.pk %}">here</a> to download profile.
-                    {% endif %}
+                    The below is a dump from the cPython profiler.
                 </div>
-
-                <table id='pyprofile-table' class="sortable">
-                    {% for row in silk_request.profile_table %}
-                        <tr>
-                            {% for column in row %}
-                                {% if forloop.parentloop.counter0 %}
-                                    <td>
-                                        {% if forloop.counter0 == file_column %}
-                                            <div class="file-path">
-                                                {{ column }}
-                                            </div>
-                                            {% if forloop.parentloop.counter0 == pos %}
-                                                {% code pyprofile_code pyprofile_actual_line %}
-                                            {% endif %}
-                                        {% else %}
-                                            {{ column }}
-                                        {% endif %}
-                                    </td>
-                                {% else %}
-                                    <th>{{ column }}</th>
-                                {% endif %}
-                            {% endfor %}
-                        </tr>
-                    {% endfor %}
-                </table>
+                {% if silk_request.prof_file %}
+                Click <a href="{% url 'silk:request_profile_download' request_id=silk_request.pk %}">here</a> to download profile.
+                {% endif %}
+                <pre class="pyprofile">{{ silk_request.pyprofile }}</pre>
                 {% endif %}
             </div>
 

silk/views/profile_dot.py

@@ -10,12 +10,22 @@
 from django.utils.decorators import method_decorator
 from django.views.generic import View
 from django.http import HttpResponse
-from gprof2dot import DotWriter, PstatsParser, Profile, TEMPERATURE_COLORMAP
+from gprof2dot import DotWriter, PstatsParser, Theme
 # silk
 from silk.auth import login_possibly_required, permissions_possibly_required
 from silk.models import Request
 
 
+COLOR_MAP = Theme(
+    mincolor=(0.18, 0.51, 0.53),
+    maxcolor=(0.03, 0.49, 0.50),
+    gamma=1.5,
+    fontname='FiraSans',
+    minfontsize=6.0,
+    maxfontsize=6.0,
+)
+
+
 @contextmanager
 def _temp_file_from_file_field(source):
     """
@@ -48,21 +58,17 @@ def _create_dot(profile, cutoff):
     profile.prune(node_cutoff, edge_cutoff, False)
 
     with closing(StringIO()) as fp:
-        DotWriter(fp).graph(profile, TEMPERATURE_COLORMAP)
+        DotWriter(fp).graph(profile, COLOR_MAP)
         return fp.getvalue()
 
 
-def _get_dot(request_id, cutoff):
-    silk_request = get_object_or_404(Request, pk=request_id, prof_file__isnull=False)
-    profile = _create_profile(silk_request.prof_file)
-    result = dict(dot=_create_dot(profile, cutoff))
-    return HttpResponse(json.dumps(result).encode('utf-8'), content_type='application/json')
-
-
 class ProfileDotView(View):
 
     @method_decorator(login_possibly_required)
     @method_decorator(permissions_possibly_required)
     def get(self, request, request_id):
+        silk_request = get_object_or_404(Request, pk=request_id, prof_file__isnull=False)
         cutoff = float(request.GET.get('cutoff', '') or 5)
-        return _get_dot(request_id, cutoff)
+        profile = _create_profile(silk_request.prof_file)
+        result = dict(dot=_create_dot(profile, cutoff))
+        return HttpResponse(json.dumps(result).encode('utf-8'), content_type='application/json')