From 846531363eebace28d9dc7f51a3974eefd996d2e Mon Sep 17 00:00:00 2001
From: Muhammad Faisal Bin Arba'in <faisal.arbain@gmail.com>
Date: Fri, 24 Jun 2022 01:15:39 +0800
Subject: [PATCH] PR comments

---
 src/diagrams/git/gitGraphRenderer.js | 52 ++++++++++------------------
 1 file changed, 19 insertions(+), 33 deletions(-)

diff --git a/src/diagrams/git/gitGraphRenderer.js b/src/diagrams/git/gitGraphRenderer.js
index bc6d1a8a36..0a7c457cf7 100644
--- a/src/diagrams/git/gitGraphRenderer.js
+++ b/src/diagrams/git/gitGraphRenderer.js
@@ -119,13 +119,9 @@ const drawCommits = (svg, commits, modifyGraph) => {
         circle.attr('width', 20);
         circle.attr(
           'class',
-          'commit ' +
-            commit.id +
-            ' commit-highlight' +
-            (branchPos[commit.branch].index % THEME_COLOR_LIMIT) +
-            ' ' +
-            typeClass +
-            '-outer'
+          `commit ${commit.id} commit-highlight${
+            branchPos[commit.branch].index % THEME_COLOR_LIMIT
+          } ${typeClass}-outer`
         );
         gBullets
           .append('rect')
@@ -135,13 +131,9 @@ const drawCommits = (svg, commits, modifyGraph) => {
           .attr('width', 12)
           .attr(
             'class',
-            'commit ' +
-              commit.id +
-              ' commit' +
-              (branchPos[commit.branch].index % THEME_COLOR_LIMIT) +
-              ' ' +
-              typeClass +
-              '-inner'
+            `commit ${commit.id} commit${
+              branchPos[commit.branch].index % THEME_COLOR_LIMIT
+            } ${typeClass}-inner`
           );
       } else if (commit.type === commitType.CHERRY_PICK) {
         gBullets
@@ -149,21 +141,21 @@ const drawCommits = (svg, commits, modifyGraph) => {
           .attr('cx', x)
           .attr('cy', y)
           .attr('r', 10)
-          .attr('class', 'commit ' + commit.id + ' ' + typeClass);
+          .attr('class', `commit ${commit.id} ${typeClass}`);
         gBullets
           .append('circle')
           .attr('cx', x - 3)
           .attr('cy', y + 2)
           .attr('r', 2.75)
           .attr('fill', '#fff')
-          .attr('class', 'commit ' + commit.id + ' ' + typeClass);
+          .attr('class', `commit ${commit.id} ${typeClass}`);
         gBullets
           .append('circle')
           .attr('cx', x + 3)
           .attr('cy', y + 2)
           .attr('r', 2.75)
           .attr('fill', '#fff')
-          .attr('class', 'commit ' + commit.id + ' ' + typeClass);
+          .attr('class', `commit ${commit.id} ${typeClass}`);
         gBullets
           .append('line')
           .attr('x1', x + 3)
@@ -171,7 +163,7 @@ const drawCommits = (svg, commits, modifyGraph) => {
           .attr('x2', x)
           .attr('y2', y - 5)
           .attr('stroke', '#fff')
-          .attr('class', 'commit ' + commit.id + ' ' + typeClass);
+          .attr('class', `commit ${commit.id} ${typeClass}`);
         gBullets
           .append('line')
           .attr('x1', x - 3)
@@ -179,7 +171,7 @@ const drawCommits = (svg, commits, modifyGraph) => {
           .attr('x2', x)
           .attr('y2', y - 5)
           .attr('stroke', '#fff')
-          .attr('class', 'commit ' + commit.id + ' ' + typeClass);
+          .attr('class', `commit ${commit.id} ${typeClass}`);
       } else {
         const circle = gBullets.append('circle');
         circle.attr('cx', x);
@@ -187,7 +179,7 @@ const drawCommits = (svg, commits, modifyGraph) => {
         circle.attr('r', commit.type === commitType.MERGE ? 9 : 10);
         circle.attr(
           'class',
-          'commit ' + commit.id + ' commit' + (branchPos[commit.branch].index % THEME_COLOR_LIMIT)
+          `commit ${commit.id} commit${branchPos[commit.branch].index % THEME_COLOR_LIMIT}`
         );
         if (commit.type === commitType.MERGE) {
           const circle2 = gBullets.append('circle');
@@ -196,12 +188,9 @@ const drawCommits = (svg, commits, modifyGraph) => {
           circle2.attr('r', 6);
           circle2.attr(
             'class',
-            'commit ' +
-              typeClass +
-              ' ' +
-              commit.id +
-              ' commit' +
-              (branchPos[commit.branch].index % THEME_COLOR_LIMIT)
+            `commit ${typeClass} ${commit.id} commit${
+              branchPos[commit.branch].index % THEME_COLOR_LIMIT
+            }`
           );
         }
         if (commit.type === commitType.REVERSE) {
@@ -210,12 +199,9 @@ const drawCommits = (svg, commits, modifyGraph) => {
             .attr('d', `M ${x - 5},${y - 5}L${x + 5},${y + 5}M${x - 5},${y + 5}L${x + 5},${y - 5}`)
             .attr(
               'class',
-              'commit ' +
-                typeClass +
-                ' ' +
-                commit.id +
-                ' commit' +
-                (branchPos[commit.branch].index % THEME_COLOR_LIMIT)
+              `commit ${typeClass} ${commit.id} commit${
+                branchPos[commit.branch].index % THEME_COLOR_LIMIT
+              }`
             );
         }
       }
@@ -475,7 +461,7 @@ const drawBranches = (svg, branches) => {
   const gitGraphConfig = getConfig().gitGraph;
   const g = svg.append('g');
   branches.forEach((branch, index) => {
-    let adjustIndexForTheme = index % THEME_COLOR_LIMIT;
+    const adjustIndexForTheme = index % THEME_COLOR_LIMIT;
 
     const pos = branchPos[branch.name].pos;
     const line = g.append('line');