From c7ec8190fb14037aa6dbb153d4e6a7529e49b981 Mon Sep 17 00:00:00 2001
From: Keenan Tullis <keenanjt@umich.edu>
Date: Tue, 10 Dec 2019 15:25:28 -0500
Subject: [PATCH 1/3] Gantt callback: default to node id as callback arg

---
 src/diagrams/gantt/ganttDb.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/diagrams/gantt/ganttDb.js b/src/diagrams/gantt/ganttDb.js
index 90f5066a0..7250706ee 100644
--- a/src/diagrams/gantt/ganttDb.js
+++ b/src/diagrams/gantt/ganttDb.js
@@ -488,6 +488,11 @@ const setClickFun = function(id, functionName, functionArgs) {
     }
   }
 
+  /* if no arguments passed into callback, default to passing in id */
+  if (argList.length === 0) {
+    argList.push(id);
+  }
+
   let rawTask = findTaskById(id);
   if (typeof rawTask !== 'undefined') {
     pushFun(id, () => {

From d504e00e188052c1e661997b238541e05f5dda02 Mon Sep 17 00:00:00 2001
From: Keenan Tullis <keenanjt@umich.edu>
Date: Tue, 10 Dec 2019 18:27:06 -0500
Subject: [PATCH 2/3] Adds simple tests for parsing callbacks wrt args

---
 src/diagrams/gantt/parser/gantt.spec.js | 30 +++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/src/diagrams/gantt/parser/gantt.spec.js b/src/diagrams/gantt/parser/gantt.spec.js
index 51d2c0884..650c7563f 100644
--- a/src/diagrams/gantt/parser/gantt.spec.js
+++ b/src/diagrams/gantt/parser/gantt.spec.js
@@ -106,4 +106,34 @@ describe('when parsing a gantt diagram it', function() {
       }
     });
   });
+  it('should parse callback specifier with no args', function() {
+    spyOn(ganttDb, 'setClickEvent');
+    const str =
+      'gantt\n' +
+      'dateFormat  YYYY-MM-DD\n' +
+      'section Clickable\n' +
+      'Visit mermaidjs           :active, cl1, 2014-01-07, 3d\n' +
+      'Calling a callback        :cl2, after cl1, 3d\n\n' +
+      'click cl1 href "https://mermaidjs.github.io/"\n' +
+      'click cl2 call ganttTestClick()\n';
+
+    expect(parserFnConstructor(str)).not.toThrow();
+    expect(ganttDb.setClickEvent).toHaveBeenCalledWith('cl2', 'ganttTestClick', null);
+  });
+  it('should parse callback specifier with arbitrary number of args', function() {
+    spyOn(ganttDb, 'setClickEvent');
+    const str =
+      'gantt\n' +
+      'dateFormat  YYYY-MM-DD\n' +
+      'section Clickable\n' +
+      'Visit mermaidjs           :active, cl1, 2014-01-07, 3d\n' +
+      'Calling a callback        :cl2, after cl1, 3d\n\n' +
+      'click cl1 href "https://mermaidjs.github.io/"\n' +
+      'click cl2 call ganttTestClick("test0", test1, test2)\n';
+
+    expect(parserFnConstructor(str)).not.toThrow();
+    const args = '"test1", "test2", "test3"';
+    expect(ganttDb.setClickEvent).toHaveBeenCalledWith('cl2', 'ganttTestClick', '"test0", test1, test2');
+  });
+
 });

From 0d9112a4c187fb09e9b719b2579ced2061019759 Mon Sep 17 00:00:00 2001
From: Keenan Tullis <keenanjt@umich.edu>
Date: Tue, 10 Dec 2019 19:04:42 -0500
Subject: [PATCH 3/3] Adds basic documentation for interaction with gantt

---
 docs/gantt.md | 45 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/docs/gantt.md b/docs/gantt.md
index 80421bb35..6af388093 100755
--- a/docs/gantt.md
+++ b/docs/gantt.md
@@ -288,3 +288,48 @@ Param | Descriotion | Default value
 --- | --- | ---
 mirrorActor|Turns on/off the rendering of actors below the diagram as well as above it|false
 bottomMarginAdj|Adjusts how far down the graph ended. Wide borders styles with css could generate unwantewd clipping which is why this config param exists.|1
+
+## Interaction
+
+It is possible to bind a click event to a task, the click can lead to either a javascript callback or to a link which will be opened in the current browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
+
+```
+click taskId call callback(arguments)
+click taskId href URL
+```
+
+* taskId is the id of the task
+* callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the taskId as the parameter if no other arguments are specified..
+
+Beginners tip, a full example using interactive links in an html context:
+```
+<body>
+  <div class="mermaid">
+    gantt
+      dateFormat  YYYY-MM-DD
+
+      section Clickable
+      Visit mermaidjs           :active, cl1, 2014-01-07, 3d
+      Print arguments         :cl2, after cl1, 3d
+      Print task              :cl3, after cl2, 3d
+
+      click cl1 href "https://mermaidjs.github.io/"
+      click cl2 call printArguments("test1", "test2", test3)
+      click cl3 call printTask()
+  </div>
+
+  <script>
+    var printArguments = function(arg1, arg2, arg3) {
+      alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3);
+    }
+    var printTask = function(taskId) {
+      alert('taskId: ' + taskId);
+    }
+    var config = {
+      startOnLoad:true,
+      securityLevel:'loose',
+    };
+    mermaid.initialize(config);
+  </script>
+</body>
+```