Render the git graph on the server (#12333)

Rendering the git graph on the server means that we can properly track flows and switch from the Canvas implementation to a SVG implementation.

* This implementation provides a 16 limited color selection
* The uniqued color numbers are also provided
* And there is also a monochrome version
*In addition is a hover highlight that allows users to highlight commits on the same flow.

Closes #12209

Signed-off-by: Andrew Thornton art27@cantab.net
Co-authored-by: silverwind <me@silverwind.io>

5 files changed, 304 insertions, 25 deletions

diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 94b1d72a0b..81a3282ee4 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -3082,11 +3082,3 @@ tbody.commit-list {
         }
     }
 }
-
-#git-graph-container {
-    display: none;
-}
-
-#git-graph-container.in {
-    display: block;
-}
diff --git a/web_src/less/features/gitgraph.less b/web_src/less/features/gitgraph.less
new file mode 100644
index 0000000000..8a9c4239a7
--- /dev/null
+++ b/web_src/less/features/gitgraph.less
@@ -0,0 +1,256 @@
+#git-graph-container {
+    float: left;
+    display: block;
+    overflow-x: auto;
+    width: 100%;
+
+    .color-buttons {
+        margin-right: 0;
+    }
+
+    .ui.header.dividing {
+        padding-bottom: 10px;
+    }
+
+    li {
+        list-style-type: none;
+        height: 20px;
+        line-height: 20px;
+        white-space: nowrap;
+
+        .node-relation {
+            font-family: "Bitstream Vera Sans Mono", "Courier", monospace;
+        }
+
+        .author {
+            color: #666666;
+        }
+
+        .time {
+            color: #999999;
+            font-size: 80%;
+        }
+
+        a {
+            color: #000000;
+        }
+
+        a:hover {
+            text-decoration: underline;
+        }
+
+        a em {
+            color: #bb0000;
+            border-bottom: 1px dotted #bbbbbb;
+            text-decoration: none;
+            font-style: normal;
+        }
+    }
+
+    #rel-container {
+        max-width: 30%;
+        overflow-x: auto;
+        float: left;
+    }
+
+    #rev-container {
+        width: 100%;
+    }
+
+    #rev-list {
+        margin: 0;
+        padding: 0 5px;
+        min-width: 95%;
+
+        li.highlight,
+        li.hover {
+            background-color: rgba(0, 0, 0, .05);
+        }
+
+        li.highlight.hover {
+            background-color: rgba(0, 0, 0, .1);
+        }
+    }
+
+    #graph-raw-list {
+        margin: 0;
+    }
+
+    &.monochrome #rel-container {
+        .flow-group {
+            stroke: grey;
+            fill: grey;
+        }
+
+        .flow-group.highlight {
+            stroke: black;
+            fill: black;
+        }
+    }
+
+    &:not(.monochrome) #rel-container {
+        .flow-group {
+            &.flow-color-16-1 {
+                stroke: #499a37;
+                fill: #499a37;
+            }
+
+            &.flow-color-16-2 {
+                stroke: hsl(356, 58%, 54%);
+                fill: #ce4751;
+            }
+
+            &.flow-color-16-3 {
+                stroke: #8f9121;
+                fill: #8f9121;
+            }
+
+            &.flow-color-16-4 {
+                stroke: #ac32a6;
+                fill: #ac32a6;
+            }
+
+            &.flow-color-16-5 {
+                stroke: #3d27aa;
+                fill: #3d27aa;
+            }
+
+            &.flow-color-16-6 {
+                stroke: #c67d28;
+                fill: #c67d28;
+            }
+
+            &.flow-color-16-7 {
+                stroke: #4db392;
+                fill: #4db392;
+            }
+
+            &.flow-color-16-8 {
+                stroke: #aa4d30;
+                fill: #aa4d30;
+            }
+
+            &.flow-color-16-9 {
+                stroke: #2a6f84;
+                fill: #2a6f84;
+            }
+
+            &.flow-color-16-10 {
+                stroke: #c45327;
+                fill: #c45327;
+            }
+
+            &.flow-color-16-11 {
+                stroke: #3d965c;
+                fill: #3d965c;
+            }
+
+            &.flow-color-16-12 {
+                stroke: #792a93;
+                fill: #792a93;
+            }
+
+            &.flow-color-16-13 {
+                stroke: #439d73;
+                fill: #439d73;
+            }
+
+            &.flow-color-16-14 {
+                stroke: #103aad;
+                fill: #103aad;
+            }
+
+            &.flow-color-16-15 {
+                stroke: #982e85;
+                fill: #982e85;
+            }
+
+            &.flow-color-16-0 {
+                stroke: #7db233;
+                fill: #7db233;
+            }
+        }
+
+        .flow-group.highlight {
+            &.flow-color-16-1 {
+                stroke: #5ac144;
+                fill: #5ac144;
+            }
+
+            &.flow-color-16-2 {
+                stroke: #ed5a8b;
+                fill: #ed5a8b;
+            }
+
+            &.flow-color-16-3 {
+                stroke: #ced049;
+                fill: #ced048;
+            }
+
+            &.flow-color-16-4 {
+                stroke: #db61d7;
+                fill: #db62d6;
+            }
+
+            &.flow-color-16-5 {
+                stroke: #4e33d1;
+                fill: #4f35d1;
+            }
+
+            &.flow-color-16-6 {
+                stroke: #e6a151;
+                fill: #e6a151;
+            }
+
+            &.flow-color-16-7 {
+                stroke: #44daaa;
+                fill: #44daaa;
+            }
+
+            &.flow-color-16-8 {
+                stroke: #dd7a5c;
+                fill: #dd7a5c;
+            }
+
+            &.flow-color-16-9 {
+                stroke: #38859c;
+                fill: #38859c;
+            }
+
+            &.flow-color-16-10 {
+                stroke: #d95520;
+                fill: #d95520;
+            }
+
+            &.flow-color-16-11 {
+                stroke: #42ae68;
+                fill: #42ae68;
+            }
+
+            &.flow-color-16-12 {
+                stroke: #9126b5;
+                fill: #9126b5;
+            }
+
+            &.flow-color-16-13 {
+                stroke: #4ab080;
+                fill: #4ab080;
+            }
+
+            &.flow-color-16-14 {
+                stroke: #284fb8;
+                fill: #284fb8;
+            }
+
+            &.flow-color-16-15 {
+                stroke: #971c80;
+                fill: #971c80;
+            }
+
+            &.flow-color-16-0 {
+                stroke: #87ca28;
+                fill: #87ca28;
+            }
+        }
+    }
+}
diff --git a/web_src/less/index.less b/web_src/less/index.less
index ef38f863cd..92b25e1db1 100644
--- a/web_src/less/index.less
+++ b/web_src/less/index.less
@@ -1,5 +1,6 @@
 @import "~font-awesome/css/font-awesome.css";
-@import "./vendor/gitGraph.css";
+
+@import "./features/gitgraph.less";
 @import "./features/animations.less";
 @import "./markdown/mermaid.less";
 
diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
index 8de66fd251..1e8c118675 100644
--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -919,11 +919,17 @@ a.ui.basic.green.label:hover {
 
 .ui.active.button:active,
 .ui.button:active,
-.ui.button:focus {
+.ui.button:focus,
+.ui.active.button {
     background-color: #2e3e4e;
     color: #dbdbdb;
 }
 
+.ui.active.button:hover {
+    background-color: #475e75;
+    color: #dbdbdb;
+}
+
 .ui.dropdown .menu .selected.item,
 .ui.dropdown.selected {
     color: #dbdbdb;
@@ -1921,6 +1927,45 @@ footer .container .links > * {
     color: #2a2e3a;
 }
 
+#git-graph-container.monochrome #rel-container .flow-group {
+    stroke: dimgrey;
+    fill: dimgrey;
+}
+
+#git-graph-container.monochrome #rel-container .flow-group.highlight {
+    stroke: darkgrey;
+    fill: darkgrey;
+}
+
+#git-graph-container:not(.monochrome) #rel-container .flow-group {
+    &.flow-color-16-5 {
+        stroke: #5543b1;
+        fill: #5543b1;
+    }
+}
+
+#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight {
+    &.flow-color-16-5 {
+        stroke: #7058e6;
+        fill: #7058e6;
+    }
+}
+
+#git-graph-container #rev-list li.highlight,
+#git-graph-container #rev-list li.hover {
+    background-color: rgba(255, 255, 255, .05);
+}
+
+#git-graph-container #rev-list li.highlight.hover {
+    background-color: rgba(255, 255, 255, .1);
+}
+
+#git-graph-container .ui.buttons button#flow-color-monochrome.ui.button {
+    border-left-color: rgb(76, 80, 92);
+    border-left-style: solid;
+    border-left-width: 1px;
+}
+
 .mermaid-chart {
     filter: invert(84%) hue-rotate(180deg);
 }
diff --git a/web_src/less/vendor/gitGraph.css b/web_src/less/vendor/gitGraph.css
deleted file mode 100644
index bb7e708101..0000000000
--- a/web_src/less/vendor/gitGraph.css
+++ /dev/null
@@ -1,15 +0,0 @@
-/* This is a customized version of https://github.com/bluef/gitgraph.js/blob/master/gitgraph.css
-   Changes include the removal of `body` and `em` styles */
-#git-graph-container, #rel-container {float:left;}
-#rel-container {max-width:30%; overflow-x:auto;}
-#git-graph-container {overflow-x:auto; width:100%}
-#git-graph-container li {list-style-type:none;height:20px;line-height:20px; white-space:nowrap;}
-#git-graph-container li .node-relation {font-family:'Bitstream Vera Sans Mono', 'Courier', monospace;}
-#git-graph-container li .author {color:#666666;}
-#git-graph-container li .time {color:#999999;font-size:80%}
-#git-graph-container li a {color:#000000;}
-#git-graph-container li a:hover {text-decoration:underline;}
-#git-graph-container li a em {color:#BB0000;border-bottom:1px dotted #BBBBBB;text-decoration:none;font-style:normal;}
-#rev-container {width:100%}
-#rev-list {margin:0;padding:0 5px 0 5px;min-width:95%}
-#graph-raw-list {margin:0px;}