From 108bbbea3c60b1062552d97875412cacaece24e2 Mon Sep 17 00:00:00 2001
From: zPlus <zplus@peers.community>
Date: Sun, 7 Aug 2022 22:52:55 +0200
Subject: [PATCH] Add diffstat histogram in commit page.

---
 static/css/clif.css              |  71 +++++++++++++-
 templates/repository/commit.html | 163 ++++++++++++++++++-------------
 templates/repository/log.html    |   2 +-
 3 files changed, 168 insertions(+), 68 deletions(-)

diff --git a/static/css/clif.css b/static/css/clif.css
index f104018..5c82909 100644
--- a/static/css/clif.css
+++ b/static/css/clif.css
@@ -326,10 +326,73 @@ div.commit {
 }
 
     div.commit .message {
-        margin: 2rem 0;
         white-space: pre-wrap;
     }
     
+    div.commit details.diffstat {
+    }
+    
+    div.commit details.diffstat table {
+        width: 100%;
+    }
+    
+    div.commit details.diffstat table .filemode {
+        font-family: monospace;
+        font-size: 1rem;
+        white-space: nowrap;
+        width: 0;
+    }
+    
+    div.commit details.diffstat table .path {
+        font-family: monospace;
+        font-size: 1rem;
+        padding: 0 1rem;
+        white-space: nowrap;
+        width: 0;
+    }
+    
+    div.commit details.diffstat table .lines {
+        font-family: monospace;
+        font-size: 1rem;
+        text-align: right;
+        white-space: nowrap;
+        width:0;
+    }
+    
+    div.commit details.diffstat table .histogram {
+        max-width: 20%;
+    }
+    
+    div.commit details.diffstat table .histogram span {
+        display: inline-block;
+        height:1rem;
+        vertical-align: middle;
+    }
+    
+    div.commit details.diffstat table .histogram .insertions {
+        background: lightgreen;
+    }
+    
+    div.commit details.diffstat table .histogram .deletions {
+        background: red;
+    }
+    
+    div.commit details.diffstat .accumulated {
+        margin-top: .5rem;
+    }
+    
+    div.commit details.diffstat .accumulated .insertions {
+        color: darkgreen;
+    }
+    
+    div.commit details.diffstat .accumulated .deletions {
+        color: darkred;
+    }
+    
+    div.commit details.diff_options input[type=submit] {
+        margin-top: .5rem;
+    }
+    
     div.commit .diff {
         border: 1px solid #d4d4d4;
         border-collapse: collapse;
@@ -349,6 +412,12 @@ div.commit {
         padding: .1rem .5rem;
     }
     
+    div.commit .diff .histogram {
+        border-bottom: .3rem solid;
+        display: inline-block;
+        vertical-align: middle;
+    }
+    
     div.commit .diff .header {
         background-color: #f0f9ff;
         color: darkblue;
diff --git a/templates/repository/commit.html b/templates/repository/commit.html
index f814f2d..e3de9bf 100644
--- a/templates/repository/commit.html
+++ b/templates/repository/commit.html
@@ -51,76 +51,99 @@
                         {% endfor %}
                     </td>
                 </tr>
-                <tr>
-                    <td>
-                        <b>±</b>
-                    </td>
-                    <td>
-                        {{ diff.stats.files_changed }} files changed,
-                        {{ diff.stats.insertions }} insertions,
-                        {{ diff.stats.deletions }} deletions
-                    </td>
-                </tr>
             </tbody>
         </table>
         
+        <br />
+        
         <div class="message">{{ commit.message }}</div>
         
-        <div>
-            <details>
-                <summary>Diff options</summary>
-                <form action="" method="get">
-                    <table>
-                        <tr>
-                            <td>
-                                View
-                            </td>
-                            <td>
-                                <label><input type="radio" name="mode" value="udiff" {{ 'checked' if mode == 'udiff' }}>Unified</label>
-                                <label><input type="radio" name="mode" value="ssdiff" {{ 'checked' if mode == 'ssdiff' }}>Side by side</label>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>
-                                Context lines
-                            </td>
-                            <td>
-                                <input type="number" min=0 max=1000 name="context_lines" value="{{ context_lines }}" />
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>
-                                Inter-hunk lines
-                            </td>
-                            <td>
-                                <input type="number" min=0 max=1000 name="inter_hunk_lines" value="{{ inter_hunk_lines }}" />
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>
-                                Side
-                            </td>
-                            <td>
-                                <label><input type="radio" name="side" value="normal" {{ 'checked' if side == 'normal' }}>Normal</label>
-                                <label><input type="radio" name="side" value="reverse" {{ 'checked' if side == 'reverse' }}>Reverse</label>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>
-                                Whitespace
-                            </td>
-                            <td>
-                                <label><input type="radio" name="whitespace" value="include" {{ 'checked' if whitespace == 'include' }}>Include</label>
-                                <label><input type="radio" name="whitespace" value="ignore_all" {{ 'checked' if whitespace == 'ignore_all' }}>Ignore all</label>
-                                <label><input type="radio" name="whitespace" value="ignore_change" {{ 'checked' if whitespace == 'ignore_change' }}>Ignore amount changes</label>
-                                <label><input type="radio" name="whitespace" value="ignore_eol" {{ 'checked' if whitespace == 'ignore_eol' }}>Ignore at end of line</label>
-                            </td>
-                        </tr>
-                    </table>
-                    <input type="submit" value="Update" />
-                </form>
-            </details>
-        </div>
+        <br /><br /><br /><br />
+        
+        <details class="diffstat" open>
+            {# pygit2 appears to recompute all the stats every time we use diff.stats,
+             # therefore we set this variable in order to compute it only once.
+             #}
+            {% set diff_stats = diff.stats %}
+        
+            <summary>Diffstat</summary>
+            <table>
+                {% for patch in diff %}
+                    <tr>
+                        <td class="filemode">{{ patch.delta.new_file.mode|filemode }}</td>
+                        <td class="path">{{ patch.delta.new_file.path }}</td>
+                        <td class="lines">{{ patch.line_stats[1] + patch.line_stats[2] }}</td>
+                        <td class="histogram">
+                            <span title="+{{ patch.line_stats[1] }}" class="insertions" style="width:{{ patch.line_stats[1] / (diff_stats.insertions + diff_stats.deletions) * 100 }}%"></span
+                            ><span title="-{{ patch.line_stats[2] }}" class="deletions" style="width:{{ patch.line_stats[2] / (diff_stats.insertions + diff_stats.deletions) * 100 }}%"></span>
+                        </td>
+                        <td></td>
+                    </tr>
+                {% endfor %}
+            </table>
+            
+            <div class="accumulated">
+                <b>{{ diff_stats.files_changed }}</b> file{{ 's' if diff_stats.files_changed != 1 }} changed,
+                <span class="insertions"><b>{{ diff_stats.insertions }}</b> insertion{{ 's' if diff_stats.insertions != 1 }}</span>,
+                <span class="deletions"><b>{{ diff_stats.deletions }}</b> deletion{{ 's' if diff_stats.deletions != 1 }}</span>
+            </div>
+        </details>
+        
+        <br />
+        
+        <details class="diff_options">
+            <summary>Diff options</summary>
+            <form action="" method="get">
+                <table>
+                    <tr>
+                        <td>
+                            View
+                        </td>
+                        <td>
+                            <label><input type="radio" name="mode" value="udiff" {{ 'checked' if mode == 'udiff' }}>Unified</label>
+                            <label><input type="radio" name="mode" value="ssdiff" {{ 'checked' if mode == 'ssdiff' }}>Side by side</label>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            Context lines
+                        </td>
+                        <td>
+                            <input type="number" min=0 max=1000 name="context_lines" value="{{ context_lines }}" />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            Inter-hunk lines
+                        </td>
+                        <td>
+                            <input type="number" min=0 max=1000 name="inter_hunk_lines" value="{{ inter_hunk_lines }}" />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            Side
+                        </td>
+                        <td>
+                            <label><input type="radio" name="side" value="normal" {{ 'checked' if side == 'normal' }}>Normal</label>
+                            <label><input type="radio" name="side" value="reverse" {{ 'checked' if side == 'reverse' }}>Reverse</label>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            Whitespace
+                        </td>
+                        <td>
+                            <label><input type="radio" name="whitespace" value="include" {{ 'checked' if whitespace == 'include' }}>Include</label>
+                            <label><input type="radio" name="whitespace" value="ignore_all" {{ 'checked' if whitespace == 'ignore_all' }}>Ignore all</label>
+                            <label><input type="radio" name="whitespace" value="ignore_change" {{ 'checked' if whitespace == 'ignore_change' }}>Ignore amount changes</label>
+                            <label><input type="radio" name="whitespace" value="ignore_eol" {{ 'checked' if whitespace == 'ignore_eol' }}>Ignore at end of line</label>
+                        </td>
+                    </tr>
+                </table>
+                <input type="submit" value="Update" />
+            </form>
+        </details>
         
         {% for patch in diff %}
         
@@ -139,7 +162,15 @@
                 <thead>
                     <tr>
                         <td colspan="4">
-                            -{{ patch.line_stats[2] }}/+{{ patch.line_stats[1] }}
+                            {% if patch.line_stats[1] + patch.line_stats[2] > 0 %}
+                                {% set color_border = patch.line_stats[1] / ( patch.line_stats[1] + patch.line_stats[2] ) * 100 %}
+                            {% else %}
+                                {% set color_border = 0 %}
+                            {% endif %}
+                            
+                            <span class="histogram" style="border-image: linear-gradient(to right, lightgreen {{ color_border }}%, red {{ color_border }}%) 1;">
+                                +{{ patch.line_stats[1] }}/-{{ patch.line_stats[2] }}
+                            </span>
                             
                             {% if patch.delta.status == 1 %}
                                 <b title="Added">A</b> {{ patch.delta.new_file.path }}
diff --git a/templates/repository/log.html b/templates/repository/log.html
index 2ec71a7..c2da4bc 100644
--- a/templates/repository/log.html
+++ b/templates/repository/log.html
@@ -78,7 +78,7 @@
                     </td>
                     <td class="lines">
                         {% if commit.short_id in diff %}
-                            <span class="deletions">-{{ diff[commit.short_id].stats.deletions }}</span>/<span class="insertions">+{{ diff[commit.short_id].stats.insertions }}</span>
+                            <span class="insertions">+{{ diff[commit.short_id].stats.insertions }}</span>/<span class="deletions">-{{ diff[commit.short_id].stats.deletions }}</span>
                         {% endif %}
                     </td>
                 </tr>