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>

1 files changed, 46 insertions, 1 deletions

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);
 }