From 87b56bdd9a96062d5e7aca56774a4913e8148cff Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knut.sveidqvist@ipiccolo.com>
Date: Thu, 7 Apr 2022 18:22:06 +0200
Subject: [PATCH] #1252 Adding confuration options and some cleanup, swicth of
 graphType from git to gitGraph

---
 cypress/platform/gitgraph2.html      |   6 +-
 docs/Setup.md                        |  13 -
 src/Diagram.js                       |   2 +-
 src/config_org.js                    | 162 ----------
 src/defaultConfig.js                 |  34 +-
 src/diagrams/git/gitGraphAst.js      |   4 -
 src/diagrams/git/gitGraphRenderer.js | 460 ++++++++++++++-------------
 src/mermaidAPI.js                    |   9 +-
 src/styles.js                        |   4 +-
 src/utils.js                         |   2 +-
 src/utils.spec.js                    |   2 +-
 11 files changed, 254 insertions(+), 444 deletions(-)
 delete mode 100644 src/config_org.js

diff --git a/cypress/platform/gitgraph2.html b/cypress/platform/gitgraph2.html
index 7f41d0820..b3ecd7fc5 100644
--- a/cypress/platform/gitgraph2.html
+++ b/cypress/platform/gitgraph2.html
@@ -9,7 +9,7 @@
     <style>
       body {
         /* background: rgb(221, 208, 208); */
-        background:#111;
+        /* background:#111; */
         /* background:#333; */
         font-family: 'Arial';
         }
@@ -43,6 +43,7 @@
 
     </div>
     <div class="mermaid" style="width: 100%; height: 20%;">
+      %%{init: {  "gitGraph": { "showBranches": false, "mainBranchName": "APA" }}}%%
       gitGraph
       commit
       branch hotfix
@@ -101,7 +102,7 @@
         // console.error('Mermaid error: ', err);
       };
       mermaid.initialize({
-        theme: 'dark',
+        theme: 'default',
         themeVariables: {
           // primaryColor: '#9400D3',
           // darkMode: false,
@@ -119,6 +120,7 @@
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 1,
         flowchart: { curve: 'linear', htmlLabels: true },
+        // gitGraph: { showCommitLabel: false },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
diff --git a/docs/Setup.md b/docs/Setup.md
index 5714782a2..f6c84610a 100644
--- a/docs/Setup.md
+++ b/docs/Setup.md
@@ -756,19 +756,6 @@ available space if not the absolute space required is used.
 
 Default value: true
 
-## useMaxWidth
-
-| Parameter   | Description | Type    | Required | Values      |
-| ----------- | ----------- | ------- | -------- | ----------- |
-| useMaxWidth | See notes   | boolean | 4        | true, false |
-
-**Notes:**
-
-When this flag is set the height and width is set to 100% and is then scaling with the
-available space if not the absolute space required is used.
-
-Default value: true
-
 ## defaultRenderer
 
 | Parameter       | Description | Type    | Required | Values                  |
diff --git a/src/Diagram.js b/src/Diagram.js
index ed2f74aa4..8e1e7a6bb 100644
--- a/src/Diagram.js
+++ b/src/Diagram.js
@@ -49,7 +49,7 @@ class Diagram {
     this.type = utils.detectType(txt, cnf);
     log.debug('Type ' + this.type);
     switch (this.type) {
-      case 'git':
+      case 'gitGraph':
         this.parser = gitGraphParser;
         this.parser.parser.yy = gitGraphAst;
         this.db = gitGraphAst;
diff --git a/src/config_org.js b/src/config_org.js
deleted file mode 100644
index 2b5d6a038..000000000
--- a/src/config_org.js
+++ /dev/null
@@ -1,162 +0,0 @@
-import { assignWithDepth } from './utils';
-import { log } from './logger'; // eslint-disable-line
-import theme from './themes';
-import config from './defaultConfig';
-
-const handleThemeVariables = (value) => {
-  return theme[value] ? theme[value].getThemeVariables() : theme.default.getThemeVariables();
-};
-
-const manipulators = {
-  themeVariables: handleThemeVariables,
-};
-
-// debugger;
-config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
-config.git.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
-export const defaultConfig = Object.freeze(config);
-
-const siteConfig = assignWithDepth({}, defaultConfig);
-const currentConfig = assignWithDepth({}, defaultConfig);
-
-/**
- * ## setSiteConfig
- *
- * | Function      | Description                           | Type        | Values                                  |
- * | ------------- | ------------------------------------- | ----------- | --------------------------------------- |
- * | setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array |
- *
- * **Notes:** Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls
- * to reset() will reset the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig)
- * will reset siteConfig and currentConfig to the defaultConfig Note: currentConfig is set in this
- * function Default value: At default, will mirror Global Config
- *
- * @param {any} conf - The base currentConfig to use as siteConfig
- * @returns {any} - The siteConfig
- */
-export const setSiteConfig = (conf) => {
-  console.log('setSiteConfig');
-
-  Object.keys(conf).forEach((key) => {
-    const manipulator = manipulators[key];
-    conf[key] = manipulator ? manipulator(conf[key]) : conf[key];
-  });
-
-  assignWithDepth(currentConfig, conf, { clobber: true });
-  // Set theme variables if user has set the theme option
-  assignWithDepth(siteConfig, conf);
-
-  return getSiteConfig();
-};
-/**
- * ## getSiteConfig
- *
- * | Function      | Description                                       | Type        | Values                           |
- * | ------------- | ------------------------------------------------- | ----------- | -------------------------------- |
- * | setSiteConfig | Returns the current siteConfig base configuration | Get Request | Returns Any Values in siteConfig |
- *
- * **Notes**: Returns **any** values in siteConfig.
- *
- * @returns {any}
- */
-export const getSiteConfig = () => {
-  return assignWithDepth({}, siteConfig);
-};
-/**
- * ## setConfig
- *
- * | Function      | Description                           | Type        | Values                                  |
- * | ------------- | ------------------------------------- | ----------- | --------------------------------------- |
- * | setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array |
- *
- * **Notes**: Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure
- * keys. Any values found in conf with key found in siteConfig.secure will be replaced with the
- * corresponding siteConfig value.
- *
- * @param {any} conf - The potential currentConfig
- * @returns {any} - The currentConfig merged with the sanitized conf
- */
-export const setConfig = (conf) => {
-  console.log('setConfig');
-  sanitize(conf);
-  Object.keys(conf).forEach((key) => {
-    const manipulator = manipulators[key];
-    conf[key] = manipulator ? manipulator(conf[key]) : conf[key];
-  });
-
-  assignWithDepth(currentConfig, conf);
-  return getConfig();
-};
-/**
- * ## getConfig
- *
- * | Function  | Description               | Type        | Return Values                 |
- * | --------- | ------------------------- | ----------- | ----------------------------- |
- * | getConfig | Obtains the currentConfig | Get Request | Any Values from currentConfig |
- *
- * **Notes**: Returns **any** the currentConfig
- *
- * @returns {any} - The currentConfig
- */
-export const getConfig = () => {
-  return assignWithDepth({}, currentConfig);
-};
-/**
- * ## sanitize
- *
- * | Function | Description                            | Type        | Values |
- * | -------- | -------------------------------------- | ----------- | ------ |
- * | sanitize | Sets the siteConfig to desired values. | Put Request | None   |
- *
- * Ensures options parameter does not attempt to override siteConfig secure keys **Notes**: modifies
- * options in-place
- *
- * @param {any} options - The potential setConfig parameter
- */
-export const sanitize = (options) => {
-  Object.keys(siteConfig.secure).forEach((key) => {
-    if (typeof options[siteConfig.secure[key]] !== 'undefined') {
-      // DO NOT attempt to print options[siteConfig.secure[key]] within `${}` as a malicious script
-      // can exploit the logger's attempt to stringify the value and execute arbitrary code
-      log.trace(
-        `Denied attempt to modify a secure key ${siteConfig.secure[key]}`,
-        options[siteConfig.secure[key]]
-      );
-      delete options[siteConfig.secure[key]];
-    }
-  });
-};
-/**
- * ## reset
- *
- * | Function | Description                  | Type        | Required | Values |
- * | -------- | ---------------------------- | ----------- | -------- | ------ |
- * | reset    | Resets currentConfig to conf | Put Request | Required | None   |
- *
- * | Parameter | Description |Type | Required | Values|
- *
- * | --- | --- | --- | --- | --- |
- * | conf| base set of values, which currentConfig coul be **reset** to.| Dictionary | Required | Any Values, with respect to the secure Array|
- *
- * **Notes**: (default: current siteConfig ) (optional, default `getSiteConfig()`)
- *
- * @param {any} conf - The base currentConfig to reset to (default: current siteConfig )
- */
-export const reset = (conf = getSiteConfig()) => {
-  console.warn('reset');
-  Object.keys(siteConfig).forEach((key) => delete siteConfig[key]);
-  Object.keys(currentConfig).forEach((key) => delete currentConfig[key]);
-  assignWithDepth(siteConfig, conf, { clobber: true });
-  assignWithDepth(currentConfig, conf, { clobber: true });
-};
-
-const configApi = Object.freeze({
-  sanitize,
-  setSiteConfig,
-  getSiteConfig,
-  setConfig,
-  getConfig,
-  reset,
-  defaultConfig,
-});
-export default configApi;
diff --git a/src/defaultConfig.js b/src/defaultConfig.js
index 7ba41cb39..63085b0ea 100644
--- a/src/defaultConfig.js
+++ b/src/defaultConfig.js
@@ -844,25 +844,6 @@ const config = {
      */
     defaultRenderer: 'dagre-wrapper',
   },
-  git: {
-    arrowMarkerAbsolute: false,
-
-    useWidth: undefined,
-
-    /**
-     * | Parameter   | Description | Type    | Required | Values      |
-     * | ----------- | ----------- | ------- | -------- | ----------- |
-     * | useMaxWidth | See notes   | boolean | 4        | true, false |
-     *
-     * **Notes:**
-     *
-     * When this flag is set the height and width is set to 100% and is then scaling with the
-     * available space if not the absolute space required is used.
-     *
-     * Default value: true
-     */
-    useMaxWidth: true,
-  },
   state: {
     dividerMargin: 10,
     sizeUnit: 5,
@@ -1066,27 +1047,20 @@ const config = {
   },
   gitGraph: {
     diagramPadding: 8,
-    nodeSpacing: 150,
-    nodeFillColor: 'yellow',
-    nodeStrokeWidth: 2,
-    nodeStrokeColor: 'grey',
-    lineStrokeWidth: 4,
-    branchOffset: 50,
-    lineColor: 'grey',
-    leftMargin: 50,
-    branchColors: ['#442f74', '#983351', '#609732', '#AA9A39'],
-    nodeRadius: 10,
     nodeLabel: {
       width: 75,
       height: 100,
       x: -25,
       y: 0,
     },
+    mainBranchName: 'main',
+    showCommitLabel: true,
+    showBranches: true,
   },
 };
 
 config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
-config.git.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
+config.gitGraph.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
 
 const keyify = (obj, prefix = '') =>
   Object.keys(obj).reduce((res, el) => {
diff --git a/src/diagrams/git/gitGraphAst.js b/src/diagrams/git/gitGraphAst.js
index 927b82ecc..124a877fc 100644
--- a/src/diagrams/git/gitGraphAst.js
+++ b/src/diagrams/git/gitGraphAst.js
@@ -220,7 +220,6 @@ export const merge = function (otherBranch) {
 
 export const checkout = function (branch) {
   branch = common.sanitizeText(branch, configApi.getConfig());
-  console.info(branches);
   if (typeof branches[branch] === 'undefined') {
     let error = new Error(
       'Trying to checkout branch which is not yet created. (Help try using "branch ' + branch + '")'
@@ -238,9 +237,6 @@ export const checkout = function (branch) {
   } else {
     curBranch = branch;
     const id = branches[curBranch];
-    console.log(id);
-    console.log('hi');
-    console.log(commits);
     head = commits[id];
   }
 };
diff --git a/src/diagrams/git/gitGraphRenderer.js b/src/diagrams/git/gitGraphRenderer.js
index e0c5ad8eb..ad8ad57ed 100644
--- a/src/diagrams/git/gitGraphRenderer.js
+++ b/src/diagrams/git/gitGraphRenderer.js
@@ -1,18 +1,12 @@
-/* eslint-disable */
 import { curveBasis, line, select } from 'd3';
 import { interpolateToCurve, getStylesFromArray, configureSvgSize } from '../../utils';
 import db from './gitGraphAst';
-//import * as db from './mockDb';
 import gitGraphParser from './parser/gitGraph';
 import { log } from '../../logger';
-/* eslint-disable */
 import { getConfig } from '../../config';
-//import * as configApi from '../../config';
 let allCommitsDict = {};
 let branchNum;
 
-//let conf = configApi.getConfig();
-//const commitType = db.commitType;
 const commitType = {
   NORMAL: 0,
   REVERSE: 1,
@@ -29,89 +23,55 @@ const clear = () => {
   commitPos = {};
   allCommitsDict = {};
   maxPos = 0;
-  lanes = []
+  lanes = [];
 };
 
-// let apiConfig = {};
-// export const setConf = function(c) {
-//   apiConfig = c;
-// };
-/** @param svg */
-function svgCreateDefs(svg) {
-  const config = getConfig().gitGraph;
-  svg
-    .append('defs')
-    .append('g')
-    .attr('id', 'def-commit')
-    .append('circle')
-    .attr('r', config.nodeRadius)
-    .attr('cx', 0)
-    .attr('cy', 0);
-  svg
-    .select('#def-commit')
-    .append('foreignObject')
-    .attr('width', config.nodeLabel.width)
-    .attr('height', config.nodeLabel.height)
-    .attr('x', config.nodeLabel.x)
-    .attr('y', config.nodeLabel.y)
-    .attr('class', 'node-label')
-    .attr('requiredFeatures', 'http://www.w3.org/TR/SVG11/feature#Extensibility')
-    .append('p')
-    .html('');
-}
-
 /**
- * @param svg
- * @param points
- * @param colorIdx
- * @param interpolate
- */
-/**
-// Pass in the element and its pre-transform coords
+ * Draws a text, used for labels of the branches
  *
- * @param element
- * @param coords
+ * @param {string} txt The text
+ * @returns {SVGElement}
  */
-
-/**
- * @param svg
- * @param fromId
- * @param toId
- * @param direction
- * @param color
- */
-
 const drawText = (txt) => {
   const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-    // svgLabel.setAttribute('style', style.replace('color:', 'fill:'));
-    let rows = [];
+  let rows = [];
 
-    if (typeof txt === 'string') {
-      rows = txt.split(/\\n|\n|<br\s*\/?>/gi);
-    } else if (Array.isArray(txt)) {
-      rows = txt;
-    } else {
-      rows = [];
-    }
-
-    for (let j = 0; j < rows.length; j++) {
-      const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
-      tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
-      tspan.setAttribute('dy', '1em');
-      tspan.setAttribute('x', '0');
-      tspan.setAttribute('class', 'row');
-      tspan.textContent = rows[j].trim();
-      svgLabel.appendChild(tspan);
+  // Handling of new lines in the label
+  if (typeof txt === 'string') {
+    rows = txt.split(/\\n|\n|<br\s*\/?>/gi);
+  } else if (Array.isArray(txt)) {
+    rows = txt;
+  } else {
+    rows = [];
   }
-/**
- * @param svg
- * @param selector
- */
+
+  for (let j = 0; j < rows.length; j++) {
+    const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
+    tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
+    tspan.setAttribute('dy', '1em');
+    tspan.setAttribute('x', '0');
+    tspan.setAttribute('class', 'row');
+    tspan.textContent = rows[j].trim();
+    svgLabel.appendChild(tspan);
+  }
+  /**
+   * @param svg
+   * @param selector
+   */
   return svgLabel;
-}
-
+};
 
+/**
+ * Draws the commits with its symbol and labels. The function has tywo modes, one which only
+ * calculates the positions and one that does the actual drawing. This for a simple way getting the
+ * vertical leyering rcorrect in the graph.
+ *
+ * @param {any} svg
+ * @param {any} commits
+ * @param {any} modifyGraph
+ */
 const drawCommits = (svg, commits, modifyGraph) => {
+  const gitGraphConfig = getConfig().gitGraph;
   const gBullets = svg.append('g').attr('class', 'commit-bullets');
   const gLabels = svg.append('g').attr('class', 'commit-labels');
   let pos = 0;
@@ -119,20 +79,20 @@ const drawCommits = (svg, commits, modifyGraph) => {
   const keys = Object.keys(commits);
   const sortedKeys = keys.sort((a, b) => {
     return commits[a].seq - commits[b].seq;
-  })
+  });
   sortedKeys.forEach((key, index) => {
     const commit = commits[key];
 
     const y = branchPos[commit.branch].pos;
-    const x  = pos + 10;
-    // Don't draw the commits now but calculate the positioning which is used by the branmch lines etc.
+    const x = pos + 10;
+    // Don't draw the commits now but calculate the positioning which is used by the branch lines etc.
     if (modifyGraph) {
       let typeClass;
-      switch(commit.type) {
+      switch (commit.type) {
         case commitType.NORMAL:
           typeClass = 'commit-normal';
           break;
-          case commitType.REVERSE:
+        case commitType.REVERSE:
           typeClass = 'commit-reverse';
           break;
         case commitType.HIGHLIGHT:
@@ -147,51 +107,77 @@ const drawCommits = (svg, commits, modifyGraph) => {
 
       if (commit.type === commitType.HIGHLIGHT) {
         const circle = gBullets.append('rect');
-        circle.attr('x', x-10);
-        circle.attr('y', y-10);
+        circle.attr('x', x - 10);
+        circle.attr('y', y - 10);
         circle.attr('height', 20);
         circle.attr('width', 20);
-        circle.attr('class', 'commit ' + commit.id  + ' commit-highlight' + branchPos[commit.branch].index + ' ' + typeClass+'-outer');
-        gBullets.append('rect')
-        .attr('x', x-6)
-        .attr('y', y-6)
-        .attr('height', 12)
-        .attr('width', 12)
-        .attr('class', 'commit ' + commit.id  + ' commit' + branchPos[commit.branch].index + ' ' + typeClass+'-inner');
+        circle.attr(
+          'class',
+          'commit ' +
+            commit.id +
+            ' commit-highlight' +
+            branchPos[commit.branch].index +
+            ' ' +
+            typeClass +
+            '-outer'
+        );
+        gBullets
+          .append('rect')
+          .attr('x', x - 6)
+          .attr('y', y - 6)
+          .attr('height', 12)
+          .attr('width', 12)
+          .attr(
+            'class',
+            'commit ' +
+              commit.id +
+              ' commit' +
+              branchPos[commit.branch].index +
+              ' ' +
+              typeClass +
+              '-inner'
+          );
       } else {
         const circle = gBullets.append('circle');
         circle.attr('cx', x);
         circle.attr('cy', y);
-        circle.attr('r', commit.type === commitType.MERGE ? 9:10);
-        circle.attr('class', 'commit ' + commit.id  + ' commit' + branchPos[commit.branch].index);
-        if(commit.type === commitType.MERGE) {
+        circle.attr('r', commit.type === commitType.MERGE ? 9 : 10);
+        circle.attr('class', 'commit ' + commit.id + ' commit' + branchPos[commit.branch].index);
+        if (commit.type === commitType.MERGE) {
           const circle2 = gBullets.append('circle');
           circle2.attr('cx', x);
           circle2.attr('cy', y);
           circle2.attr('r', 6);
-          circle2.attr('class', 'commit '+typeClass + ' ' + commit.id  + ' commit' + branchPos[commit.branch].index);
+          circle2.attr(
+            'class',
+            'commit ' + typeClass + ' ' + commit.id + ' commit' + branchPos[commit.branch].index
+          );
         }
-        if(commit.type === commitType.REVERSE) {
+        if (commit.type === commitType.REVERSE) {
           const cross = gBullets.append('path');
           cross
-            .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);
+            .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
+            );
         }
       }
     }
-    commitPos[commit.id] = {x: pos + 10, y: y};
+    commitPos[commit.id] = { x: pos + 10, y: y };
 
     // The first iteration over the commits are for positioning purposes, this
     // is required for drawing the lines. The circles and labels is drawn after the labels
     // placing them on top of the lines.
     if (modifyGraph) {
-      const px=4;
-      const py=2;
-      if(commit.type !== commitType.MERGE) {
-        const labelBkg = gLabels.insert('rect')
-          .attr('class', 'commit-label-bkg');
+      const px = 4;
+      const py = 2;
+      // Draw the commit label
+      if (commit.type !== commitType.MERGE && gitGraphConfig.showCommitLabel) {
+        const labelBkg = gLabels.insert('rect').attr('class', 'commit-label-bkg');
 
-        const text = gLabels.append('text')
+        const text = gLabels
+          .append('text')
           .attr('x', pos)
           .attr('y', y + 25)
           .attr('class', 'commit-label')
@@ -206,48 +192,52 @@ const drawCommits = (svg, commits, modifyGraph) => {
           .attr('height', bbox.height + 2 * py);
         text.attr('x', pos + 10 - bbox.width / 2);
       }
-      if(commit.tag) {
+      if (commit.tag) {
         const rect = gLabels.insert('polygon');
         const hole = gLabels.append('circle');
-        const tag = gLabels.append('text')
-        // Note that we are delaying setting the x position until we know the width of the text
-        .attr('y', y - 16)
-        .attr('class', 'tag-label')
-        .text(commit.tag);
+        const tag = gLabels
+          .append('text')
+          // Note that we are delaying setting the x position until we know the width of the text
+          .attr('y', y - 16)
+          .attr('class', 'tag-label')
+          .text(commit.tag);
         let tagBbox = tag.node().getBBox();
         tag.attr('x', pos + 10 - tagBbox.width / 2);
 
-        const h2 = tagBbox.height/2
-        const ly = y - 19.2  ;
-        rect
-          .attr('class', 'tag-label-bkg')
-          .attr('points', `
-          ${pos - tagBbox.width / 2 - px/2},${ly + py}
-          ${pos - tagBbox.width / 2 - px/2},${ly - py}
+        const h2 = tagBbox.height / 2;
+        const ly = y - 19.2;
+        rect.attr('class', 'tag-label-bkg').attr(
+          'points',
+          `
+          ${pos - tagBbox.width / 2 - px / 2},${ly + py}
+          ${pos - tagBbox.width / 2 - px / 2},${ly - py}
           ${pos + 10 - tagBbox.width / 2 - px},${ly - h2 - py}
           ${pos + 10 + tagBbox.width / 2 + px},${ly - h2 - py}
-          ${pos + 10 + tagBbox.width / 2 + px},${ly + h2 + py }
-          ${pos + 10 - tagBbox.width / 2 - px},${ly + h2 + py}`);
+          ${pos + 10 + tagBbox.width / 2 + px},${ly + h2 + py}
+          ${pos + 10 - tagBbox.width / 2 - px},${ly + h2 + py}`
+        );
 
         hole
-          .attr('cx', pos - tagBbox.width / 2 + px/2)
+          .attr('cx', pos - tagBbox.width / 2 + px / 2)
           .attr('cy', ly)
           .attr('r', 1.5)
           .attr('class', 'tag-hole');
-
       }
     }
-    pos +=50;
-    if(pos>maxPos) {
+    pos += 50;
+    if (pos > maxPos) {
       maxPos = pos;
     }
   });
-}
+};
 
 /**
- * Detect if there are other commits between commit1s x-position and commit2s x-position on the same branch as commit2.
- * @param {*} commit1
- * @param {*} commit2
+ * Detect if there are other commits between commit1s x-position and commit2s x-position on the same
+ * branch as commit2.
+ *
+ * @param {any} commit1
+ * @param {any} commit2
+ * @param allCommits
  * @returns
  */
 const hasOverlappingCommits = (commit1, commit2, allCommits) => {
@@ -257,43 +247,62 @@ const hasOverlappingCommits = (commit1, commit2, allCommits) => {
   // Find commits on the same branch as commit2
   const keys = Object.keys(allCommits);
   const overlappingComits = keys.filter((key) => {
-    return allCommits[key].branch === commit2.branch && allCommits[key].seq > commit1.seq && allCommits[key].seq < commit2.seq
+    return (
+      allCommits[key].branch === commit2.branch &&
+      allCommits[key].seq > commit1.seq &&
+      allCommits[key].seq < commit2.seq
+    );
   });
 
   return overlappingComits.length > 0;
-}
+};
+
 /**
+ * This function find a lane in the y-axis that is not overlapping with any other lanes. This is
+ * used for drawing the lines between commits.
  *
+ * @param {any} y1
+ * @param {any} y2
+ * @param {any} _depth
+ * @returns
  */
 const findLane = (y1, y2, _depth) => {
   const depth = _depth || 0;
 
-  const candidate =  y1 + Math.abs(y1 - y2) / 2;
-  if(depth > 5) {
+  const candidate = y1 + Math.abs(y1 - y2) / 2;
+  if (depth > 5) {
     return candidate;
   }
 
   let ok = true;
-  for(let i = 0; i < lanes.length; i++) {
-    if(Math.abs(lanes[i] - candidate) < 10) {
+  for (let i = 0; i < lanes.length; i++) {
+    if (Math.abs(lanes[i] - candidate) < 10) {
       ok = false;
     }
   }
-  if(ok) {
+  if (ok) {
     lanes.push(candidate);
     return candidate;
   }
   const diff = Math.abs(y1 - y2);
-  return findLane(y1, y2-(diff/5), depth);
-}
+  return findLane(y1, y2 - diff / 5, depth);
+};
 
+/**
+ * This function draw trhe lines between the commits. They were arrows initially.
+ *
+ * @param {any} svg
+ * @param {any} commit1
+ * @param {any} commit2
+ * @param {any} allCommits
+ */
 const drawArrow = (svg, commit1, commit2, allCommits) => {
   const conf = getConfig();
 
   const p1 = commitPos[commit1.id];
   const p2 = commitPos[commit2.id];
   const overlappingCommits = hasOverlappingCommits(commit1, commit2, allCommits);
-  log.debug('drawArrow', p1, p2, overlappingCommits, commit1.id, commit2.id);
+  // log.debug('drawArrow', p1, p2, overlappingCommits, commit1.id, commit2.id);
 
   let url = '';
   if (conf.arrowMarkerAbsolute) {
@@ -310,28 +319,30 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
   let arc = '';
   let arc2 = '';
   let radius = 0;
-  let offset = 0
-  let colorClassNum = branchPos[commit2.branch].index
+  let offset = 0;
+  let colorClassNum = branchPos[commit2.branch].index;
   let lineDef;
-  if(overlappingCommits) {
-      arc = 'A 10 10, 0, 0, 0,';
-      arc2 = 'A 10 10, 0, 0, 1,';
-      radius = 10;
-      offset = 10;
+  if (overlappingCommits) {
+    arc = 'A 10 10, 0, 0, 0,';
+    arc2 = 'A 10 10, 0, 0, 1,';
+    radius = 10;
+    offset = 10;
     // Figure out the color of the arrow,arrows going down take the color from the destination branch
-      colorClassNum = branchPos[commit2.branch].index;
+    colorClassNum = branchPos[commit2.branch].index;
 
-      const lineY = p1.y < p2.y ? findLane(p1.y, p2.y):findLane(p2.y, p1.y);
-
-      if(p1.y < p2.y) {
-        lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY-radius} ${arc} ${p1.x + offset} ${lineY} L ${p2.x-radius} ${lineY} ${arc2} ${p2.x} ${lineY+offset} L ${p2.x} ${p2.y}`;
-      } else {
-        lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY+radius} ${arc2} ${p1.x + offset} ${lineY} L ${p2.x-radius} ${lineY} ${arc} ${p2.x} ${lineY-offset} L ${p2.x} ${p2.y}`;
-      }
+    const lineY = p1.y < p2.y ? findLane(p1.y, p2.y) : findLane(p2.y, p1.y);
 
+    if (p1.y < p2.y) {
+      lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY - radius} ${arc} ${p1.x + offset} ${lineY} L ${
+        p2.x - radius
+      } ${lineY} ${arc2} ${p2.x} ${lineY + offset} L ${p2.x} ${p2.y}`;
+    } else {
+      lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY + radius} ${arc2} ${
+        p1.x + offset
+      } ${lineY} L ${p2.x - radius} ${lineY} ${arc} ${p2.x} ${lineY - offset} L ${p2.x} ${p2.y}`;
+    }
   } else {
-
-    if(p1.y < p2.y) {
+    if (p1.y < p2.y) {
       arc = 'A 20 20, 0, 0, 0,';
       radius = 20;
       offset = 20;
@@ -339,26 +350,34 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
       // Figure out the color of the arrow,arrows going down take the color from the destination branch
       colorClassNum = branchPos[commit2.branch].index;
 
-      lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y-radius} ${arc} ${p1.x + offset} ${p2.y} L ${p2.x} ${p2.y}`;
+      lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${
+        p2.x
+      } ${p2.y}`;
     }
-    if(p1.y > p2.y) {
+    if (p1.y > p2.y) {
       arc = 'A 20 20, 0, 0, 0,';
       radius = 20;
       offset = 20;
 
       // Arrows going up take the color from the source branch
       colorClassNum = branchPos[commit1.branch].index;
-      lineDef = `M ${p1.x} ${p1.y} L ${p2.x-radius} ${p1.y} ${arc} ${p2.x} ${p1.y-offset} L ${p2.x} ${p2.y}`;
+      lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc} ${p2.x} ${p1.y - offset} L ${
+        p2.x
+      } ${p2.y}`;
     }
 
-    if(p1.y === p2.y) {
-      colorClassNum = branchPos[commit1.branch].index
-      lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y-radius} ${arc} ${p1.x + offset} ${p2.y} L ${p2.x} ${p2.y}`;
+    if (p1.y === p2.y) {
+      colorClassNum = branchPos[commit1.branch].index;
+      lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${
+        p2.x
+      } ${p2.y}`;
     }
   }
-  const arrow = svg.append('path').attr('d', lineDef)
-      .attr('class', 'arrow arrow' +  colorClassNum)
-}
+  const arrow = svg
+    .append('path')
+    .attr('d', lineDef)
+    .attr('class', 'arrow arrow' + colorClassNum);
+};
 
 const drawArrows = (svg, commits) => {
   const gArrows = svg.append('g').attr('class', 'commit-arrows');
@@ -367,123 +386,114 @@ const drawArrows = (svg, commits) => {
   const k = Object.keys(commits);
   k.forEach((key, index) => {
     const commit = commits[key];
-    if(commit.parents && commit.parents.length>0) {
+    if (commit.parents && commit.parents.length > 0) {
       commit.parents.forEach((parent) => {
         drawArrow(gArrows, commits[parent], commit, commits);
       });
     }
   });
-}
+};
 
 /**
+ * This function adds the branches and the branches' labels to the svg.
+ *
  * @param svg
  * @param commitid
  * @param branches
  * @param direction
  */
 const drawBranches = (svg, branches) => {
-  const g = svg.append('g')
-    branches.forEach((branch, index) => {
-      const pos = branchPos[branch.name].pos;
-      const line = g.append('line');
-      line.attr('x1', 0);
-      line.attr('y1', pos);
-      line.attr('x2', maxPos);
-      line.attr('y2', pos);
-      line.attr('class', 'branch branch'+index)
+  const gitGraphConfig = getConfig().gitGraph;
+  const g = svg.append('g');
+  branches.forEach((branch, index) => {
+    const pos = branchPos[branch.name].pos;
+    const line = g.append('line');
+    line.attr('x1', 0);
+    line.attr('y1', pos);
+    line.attr('x2', maxPos);
+    line.attr('y2', pos);
+    line.attr('class', 'branch branch' + index);
 
-      lanes.push(pos);
+    lanes.push(pos);
 
-      // Create the actual text element
-      const labelElement = drawText(branch.name);
-      // Create outer g, edgeLabel, this will be positioned after graph layout
-      const bkg = g.insert('rect');
-      const branchLabel = g.insert('g').attr('class', 'branchLabel');
+    let name = index === 0 ? gitGraphConfig.mainBranchName : branch.name;
 
-      // Create inner g, label, this will be positioned now for centering the text
-      const label = branchLabel.insert('g').attr('class', 'label branch-label'+index);
-      label.node().appendChild(labelElement);
-      let bbox = labelElement.getBBox();
-      bkg.attr('class', 'branchLabelBkg label' + index)
-        .attr('rx', 4)
-        .attr('ry', 4)
-        .attr('x', -bbox.width -4)
-        .attr('y', -bbox.height / 2 +8 )
-        .attr('width', bbox.width + 18)
-        .attr('height', bbox.height + 4);
+    // Create the actual text element
+    const labelElement = drawText(name);
+    // Create outer g, edgeLabel, this will be positioned after graph layout
+    const bkg = g.insert('rect');
+    const branchLabel = g.insert('g').attr('class', 'branchLabel');
 
-      label.attr('transform', 'translate(' + (-bbox.width -14) + ', ' + (pos - bbox.height/2-1) + ')');
-      bkg.attr('transform', 'translate(' + -19 + ', ' + (pos - bbox.height/2) + ')');
-    })
+    // Create inner g, label, this will be positioned now for centering the text
+    const label = branchLabel.insert('g').attr('class', 'label branch-label' + index);
+    label.node().appendChild(labelElement);
+    let bbox = labelElement.getBBox();
+    bkg
+      .attr('class', 'branchLabelBkg label' + index)
+      .attr('rx', 4)
+      .attr('ry', 4)
+      .attr('x', -bbox.width - 4)
+      .attr('y', -bbox.height / 2 + 8)
+      .attr('width', bbox.width + 18)
+      .attr('height', bbox.height + 4);
 
-}
+    label.attr(
+      'transform',
+      'translate(' + (-bbox.width - 14) + ', ' + (pos - bbox.height / 2 - 1) + ')'
+    );
+    bkg.attr('transform', 'translate(' + -19 + ', ' + (pos - bbox.height / 2) + ')');
+  });
+};
 
 /**
  * @param svg
  * @param commit
  * @param direction
  * @param branchColor
+ * @param txt
+ * @param id
+ * @param ver
  */
 export const draw = function (txt, id, ver) {
   clear();
   const conf = getConfig();
-  const config = conf.gitGraph;
+  const gitGraphConfig = getConfig().gitGraph;
   // try {
   const parser = gitGraphParser.parser;
   parser.yy = db;
   parser.yy.clear();
 
-    log.debug('in gitgraph renderer', txt + '\n', 'id:', id, ver);
+  log.debug('in gitgraph renderer', txt + '\n', 'id:', id, ver);
   // // Parse the graph definition
   parser.parse(txt + '\n');
 
-  // config = Object.assign(config, apiConfig, db.getOptions());
   const direction = db.getDirection();
   allCommitsDict = db.getCommits();
   const branches = db.getBranchesAsObjArray();
 
   // Position branches vertically
-  let pos=0;
+  let pos = 0;
   branches.forEach((branch, index) => {
-    branchPos[branch.name] = {pos, index};
-    pos+=50;
+    branchPos[branch.name] = { pos, index };
+    pos += 50;
   });
 
-
-
-  log.debug('brach pos ', branchPos);
-  log.debug('effective options', config, branches);
-  log.debug('commits', allCommitsDict);
-
   const diagram = select(`[id="${id}"]`);
-  svgCreateDefs(diagram);
-
-    diagram
-    .append('defs')
-    .append('marker')
-    .attr('id', 'arrowhead')
-    .attr('refX',24)
-    .attr('refY', 10)
-    .attr('markerUnits', 'userSpaceOnUse')
-    .attr('markerWidth', 24)
-    .attr('markerHeight', 24)
-    .attr('orient', 'auto')
-    .append('path')
-    .attr('d', 'M 0 0 L 20 10 L 0 20 z'); // this is actual shape for arrowhead
 
   drawCommits(diagram, allCommitsDict, false);
-  drawBranches(diagram, branches);
+  if (gitGraphConfig.showBranches) {
+    drawBranches(diagram, branches);
+  }
   drawArrows(diagram, allCommitsDict);
   drawCommits(diagram, allCommitsDict, true);
 
-  const padding = config.diagramPadding;
+  const padding = gitGraphConfig.diagramPadding;
   const svgBounds = diagram.node().getBBox();
   const width = svgBounds.width + padding * 2;
   const height = svgBounds.height + padding * 2;
 
   configureSvgSize(diagram, height, width, conf.useMaxWidth);
   const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`;
- // logger.debug(`viewBox ${vBox}`);
   diagram.attr('viewBox', vBox);
 };
 
diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js
index 2ea8e8105..9eec7161a 100644
--- a/src/mermaidAPI.js
+++ b/src/mermaidAPI.js
@@ -72,14 +72,14 @@ function parse(text) {
   const graphInit = utils.detectInit(text, cnf);
   if (graphInit) {
     reinitialize(graphInit);
-    log.debug('reinit ', graphInit);
+    log.info('reinit ', graphInit);
   }
   const graphType = utils.detectType(text, cnf);
   let parser;
 
   log.debug('Type ' + graphType);
   switch (graphType) {
-    case 'git':
+    case 'gitGraph':
       parser = gitGraphParser;
       parser.parser.yy = gitGraphAst;
       break;
@@ -229,6 +229,9 @@ const render = function (id, _txt, cb, container) {
     configApi.addDirective(graphInit);
   }
   let cnf = configApi.getConfig();
+
+  log.debug(cnf);
+
   // Check the maximum allowed text size
   if (_txt.length > cnf.maxTextSize) {
     txt = 'graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa';
@@ -422,7 +425,7 @@ const render = function (id, _txt, cb, container) {
 
   try {
     switch (graphType) {
-      case 'git':
+      case 'gitGraph':
         // cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
         //gitGraphRenderer.setConf(cnf.git);
         gitGraphRenderer.draw(txt, id, false);
diff --git a/src/styles.js b/src/styles.js
index fc9d13cd0..9d39fe4c8 100644
--- a/src/styles.js
+++ b/src/styles.js
@@ -2,7 +2,7 @@ import classDiagram from './diagrams/class/styles';
 import er from './diagrams/er/styles';
 import flowchart from './diagrams/flowchart/styles';
 import gantt from './diagrams/gantt/styles';
-import git from './diagrams/git/styles';
+import gitGraph from './diagrams/git/styles';
 import info from './diagrams/info/styles';
 import pie from './diagrams/pie/styles';
 import requirement from './diagrams/requirement/styles';
@@ -20,7 +20,7 @@ const themes = {
   class: classDiagram,
   stateDiagram,
   state: stateDiagram,
-  git,
+  gitGraph,
   info,
   pie,
   er,
diff --git a/src/utils.js b/src/utils.js
index 012fb98d3..e8a24bb6a 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -210,7 +210,7 @@ export const detectType = function (text, cnf) {
   }
 
   if (text.match(/^\s*gitGraph/)) {
-    return 'git';
+    return 'gitGraph';
   }
   if (text.match(/^\s*flowchart/)) {
     return 'flowchart-v2';
diff --git a/src/utils.spec.js b/src/utils.spec.js
index bd35f5ccc..2e8d335d0 100644
--- a/src/utils.spec.js
+++ b/src/utils.spec.js
@@ -214,7 +214,7 @@ Alice->Bob: hi`;
   it('should handle a graph definition for gitGraph', function () {
     const str = '  \n  gitGraph TB:\nbfs1:queue';
     const type = utils.detectType(str);
-    expect(type).toBe('git');
+    expect(type).toBe('gitGraph');
   });
 });
 describe('when finding substring in array ', function () {