Merge pull request #3258 from hiroponz/display-commit-msg

Display commit message on network graph.

Merge pull request #3258 from hiroponz/display-commit-msg
Display commit message on network graph.
Dmitriy Zaporozhets
2 parents 02f70851 06c53897
Showing 4 changed files with 132 additions and 103 deletions Show diff stats
app/assets/javascripts/branch-graph.js.coffee
app/assets/stylesheets/sections/graph.scss
app/models/network/graph.rb
spec/spec_helper.rb
@@ -5,6 +5,10 @@ class BranchGraph
     @mspace = 0
     @parents = {}
     @colors = ["#000"]
+    @offsetX = 120
+    @offsetY = 20
+    @unitTime = 30
+    @unitSpace = 10
     @load()
   load: ->
@@ -20,8 +24,6 @@ class BranchGraph
   prepareData: (@days, @commits) ->
     @collectParents()
-    @mtime += 4
-    @mspace += 10
     for c in @commits
       c.isParent = true  if c.id of @parents
@@ -35,6 +37,7 @@ class BranchGraph
       @mspace = Math.max(@mspace, c.space)
       for p in c.parents
         @parents[p[0]] = true
+        @mspace = Math.max(@mspace, p[1])
   collectColors: ->
     k = 0
@@ -46,25 +49,23 @@ class BranchGraph
       k++
   buildGraph: ->
+    graphHeight = $(@element).height()
     graphWidth = $(@element).width()
-    ch = @mspace * 20 + 100
-    cw = Math.max(graphWidth, @mtime * 20 + 260)
-    r = Raphael(@element.get(0), cw, ch)
+    ch = Math.max(graphHeight, @unitTime * @mtime + 100)
+    cw = Math.max(graphWidth, @unitSpace * @mspace + 260)
+    @r = r = Raphael(@element.get(0), cw, ch)
     top = r.set()
     cuday = 0
     cumonth = ""
-    offsetX = 20
-    offsetY = 60
-    barWidth = Math.max(graphWidth, @days.length * 20 + 320)
-    scrollLeft = cw
-    @raphael = r
-    r.rect(0, 0, barWidth, 20).attr fill: "#222"
-    r.rect(0, 20, barWidth, 20).attr fill: "#444"
+    barHeight = Math.max(graphHeight, @unitTime * @days.length + 320)
+
+    r.rect(0, 0, 20, barHeight).attr fill: "#222"
+    r.rect(20, 0, 20, barHeight).attr fill: "#444"
     for day, mm in @days
       if cuday isnt day[0]
         # Dates
-        r.text(offsetX + mm * 20, 31, day[0])
+        r.text(30, @offsetY + @unitTime * mm, day[0])
           .attr(
             font: "12px Monaco, monospace"
             fill: "#DDD"
@@ -73,7 +74,7 @@ class BranchGraph
       if cumonth isnt day[1]
         # Months
-        r.text(offsetX + mm * 20, 11, day[1])
+        r.text(10, @offsetY + @unitTime * mm, day[1])
           .attr(
             font: "12px Monaco, monospace"
             fill: "#EEE"
@@ -81,61 +82,20 @@ class BranchGraph
         cumonth = day[1]
     for commit in @commits
-      x = offsetX + 20 * commit.time
-      y = offsetY + 10 * commit.space
-      # Draw dot
-      r.circle(x, y, 3).attr(
-        fill: @colors[commit.space]
-        stroke: "none"
-      )
-
-      # Draw lines
-      for parent in commit.parents
-        parentCommit = @preparedCommits[parent[0]]
-        parentX = offsetX + 20 * parentCommit.time
-        parentY1 = offsetY + 10 * parentCommit.space
-        parentY2 = offsetY + 10 * parent[1]
-        if parentCommit.space is commit.space and parentCommit.space is parent[1]
-          r.path(["M", x, y, "L", parentX, parentY1]).attr(
-            stroke: @colors[parentCommit.space]
-            "stroke-width": 2
-          )
-
-        else if parentCommit.space < commit.space
-          if y is parentY2
-            r.path(["M", x - 5, y, "l-5,-2,0,4,5,-2", "L", x - 10, y, "L", x - 15, parentY2, "L", parentX + 5, parentY2, "L", parentX, parentY1]).attr(
-              stroke: @colors[commit.space]
-              "stroke-width": 2
-            )
-
-          else
-            r.path(["M", x - 3, y - 6, "l-4,-3,4,-2,0,5", "L", x - 5, y - 10, "L", x - 10, parentY2, "L", parentX + 5, parentY2, "L", parentX, parentY1]).attr(
-              stroke: @colors[commit.space]
-              "stroke-width": 2
-            )
+      x = @offsetX + @unitSpace * (@mspace - commit.space)
+      y = @offsetY + @unitTime * commit.time
-        else
-          r.path(["M", x - 3, y + 6, "l-4,3,4,2,0,-5", "L", x - 5, y + 10, "L", x - 10, parentY2, "L", parentX + 5, parentY2, "L", parentX, parentY1]).attr(
-            stroke: @colors[parentCommit.space]
-            "stroke-width": 2
-          )
+      @drawDot(x, y, commit)
-      @appendLabel x, y, commit.refs  if commit.refs
+      @drawLines(x, y, commit)
-      # Mark commit and displayed in the center
-      if commit.id is @options.commit_id
-        r.path(["M", x, y - 5, "L", x + 4, y - 15, "L", x - 4, y - 15, "Z"]).attr(
-          fill: "#000"
-          "fill-opacity": .7
-          stroke: "none"
-        )
+      @appendLabel(x, y, commit.refs)  if commit.refs
-        scrollLeft = x - graphWidth / 2
+      @appendAnchor(top, commit, x, y)
-      @appendAnchor top, commit, x, y
+      @markCommit(x, y, commit, graphHeight)
     top.toFront()
-    @element.scrollLeft scrollLeft
     @bindEvents()
   bindEvents: ->
@@ -167,35 +127,37 @@ class BranchGraph
         element.scrollTop element.scrollTop() + 50  if event.keyCode is 40
   appendLabel: (x, y, refs) ->
-    r = @raphael
+    r = @r
     shortrefs = refs
     # Truncate if longer than 15 chars
     shortrefs = shortrefs.substr(0, 15) + "…"  if shortrefs.length > 17
-    text = r.text(x + 5, y + 8 + 10, shortrefs).attr(
+    text = r.text(x + 8, y, shortrefs).attr(
+      "text-anchor": "start"
       font: "10px Monaco, monospace"
       fill: "#FFF"
       title: refs
     )
     textbox = text.getBBox()
-    text.transform ["t", textbox.height / -4, textbox.width / 2 + 5, "r90"]
     # Create rectangle based on the size of the textbox
-    rect = r.rect(x, y, textbox.width + 15, textbox.height + 5, 4).attr(
+    rect = r.rect(x, y - 7, textbox.width + 15, textbox.height + 5, 4).attr(
       fill: "#000"
-      "fill-opacity": .7
+      "fill-opacity": .5
       stroke: "none"
     )
-    triangle = r.path(["M", x, y + 5, "L", x + 4, y + 15, "L", x - 4, y + 15, "Z"]).attr(
+    triangle = r.path(["M", x - 5, y, "L", x - 15, y - 4, "L", x - 15, y + 4, "Z"]).attr(
       fill: "#000"
-      "fill-opacity": .7
+      "fill-opacity": .5
       stroke: "none"
     )
-    # Rotate and reposition rectangle over text
-    rect.transform ["r", 90, x, y, "t", 15, -9]
+
+    label = r.set(rect, text)
+    label.transform(["t", -rect.getBBox().width - 15, 0])
+
     # Set text to front
     text.toFront()
   appendAnchor: (top, commit, x, y) ->
-    r = @raphael
+    r = @r
     options = @options
     anchor = r.circle(x, y, 10).attr(
       fill: "#000"
@@ -204,18 +166,95 @@ class BranchGraph
     ).click(->
       window.open options.commit_url.replace("%s", commit.id), "_blank"
     ).hover(->
-      @tooltip = r.commitTooltip(x, y + 5, commit)
+      @tooltip = r.commitTooltip(x + 5, y, commit)
       top.push @tooltip.insertBefore(this)
     , ->
       @tooltip and @tooltip.remove() and delete @tooltip
     )
     top.push anchor
+  drawDot: (x, y, commit) ->
+    r = @r
+    r.circle(x, y, 3).attr(
+      fill: @colors[commit.space]
+      stroke: "none"
+    )
+    r.rect(@offsetX + @unitSpace * @mspace + 10, y - 10, 20, 20).attr(
+      fill: "url(#{commit.author.icon})"
+      stroke: @colors[commit.space]
+      "stroke-width": 2
+    )
+    r.text(@offsetX + @unitSpace * @mspace + 35, y, commit.message.split("\n")[0]).attr(
+      "text-anchor": "start"
+      font: "14px Monaco, monospace"
+    )
+
+  drawLines: (x, y, commit) ->
+    r = @r
+    for parent in commit.parents
+      parentCommit = @preparedCommits[parent[0]]
+      parentY = @offsetY + @unitTime * parentCommit.time
+      parentX1 = @offsetX + @unitSpace * (@mspace - parentCommit.space)
+      parentX2 = @offsetX + @unitSpace * (@mspace - parent[1])
+
+      if parentCommit.space is commit.space and parentCommit.space is parent[1]
+        r.path(["M", x, y, "L", parentX1, parentY]).attr(
+          stroke: @colors[parentCommit.space]
+          "stroke-width": 2
+        )
+
+      else if parentCommit.space < commit.space
+        if x is parentX2
+          r
+            .path([
+              "M", x, y + 5,
+              "l-2,5,4,0,-2,-5",
+              "L", x, y + 10,
+              "L", parentX2, y + 10,
+              "L", parentX2, parentY - 5,
+              "L", parentX1, parentY])
+            .attr(
+              stroke: @colors[commit.space]
+              "stroke-width": 2)
+
+        else
+          r
+            .path([
+              "M", x + 3, y + 3,
+              "l5,0,-2,4,-3,-4",
+              "L", x + 7, y + 5,
+              "L", parentX2, y + 10,
+              "L", parentX2, parentY - 5,
+              "L", parentX1, parentY])
+            .attr(
+              stroke: @colors[commit.space]
+              "stroke-width": 2)
+
+      else
+        r
+          .path([
+            "M", x - 3, y + 3,
+            "l-5,0,2,4,3,-4",
+            "L", x - 7, y + 5,
+            "L", parentX2, y + 10,
+            "L", parentX2, parentY - 5,
+            "L", parentX1, parentY])
+          .attr(
+            stroke: @colors[parentCommit.space]
+            "stroke-width": 2)
+
+  markCommit: (x, y, commit, graphHeight) ->
+    if commit.id is @options.commit_id
+      r = @r
+      r.path(["M", x + 5, y, "L", x + 15, y + 4, "L", x + 15, y - 4, "Z"]).attr(
+        fill: "#000"
+        "fill-opacity": .5
+        stroke: "none"
+      )
+      # Displayed in the center
+      @element.scrollTop(y - graphHeight / 2)
+
 Raphael::commitTooltip = (x, y, commit) ->
-  icon = undefined
-  nameText = undefined
-  idText = undefined
-  messageText = undefined
   boxWidth = 300
   boxHeight = 200
   icon = @image(commit.author.icon, x, y, 20, 20)
@@ -12,7 +12,7 @@
   .graph { 
     background: #f1f1f1;
     cursor: move;
-    height: 70%;
+    height: 500px;
     overflow: hidden;
   }
 }
@@ -40,15 +40,12 @@ module Network
     def index_commits
       days = []
       @map = {}
+      @reserved = {}
-      @commits.reverse.each_with_index do |c,i|
+      @commits.each_with_index do |c,i|
         c.time = i
         days[i] = c.committed_date
         @map[c.id] = c
-      end
-
-      @reserved = {}
-      days.each_index do |i|
         @reserved[i] = []
       end
@@ -135,11 +132,7 @@ module Network
       spaces = []
       commit.parents(@map).each do |parent|
-        range = if commit.time < parent.time then
-                  commit.time..parent.time
-                else
-                  parent.time..commit.time
-                end
+        range = commit.time..parent.time
         space = if commit.space >= parent.space then
                   find_free_parent_space(range, parent.space, -1, commit.space)
@@ -166,7 +159,7 @@ module Network
       range.each do |i|
         if i != range.first &&
           i != range.last &&
-          @commits[reversed_index(i)].spaces.include?(overlap_space) then
+          @commits[i].spaces.include?(overlap_space) then
           return true;
         end
@@ -184,7 +177,7 @@ module Network
         return
       end
-      time_range = leaves.last.time..leaves.first.time
+      time_range = leaves.first.time..leaves.last.time
       space_base = get_space_base(leaves)
       space = find_free_space(time_range, 2, space_base)
       leaves.each do |l|
@@ -198,17 +191,17 @@ module Network
       end
       # and mark it as reserved
-      min_time = leaves.last.time
-      leaves.last.parents(@map).each do |parent|
-        if parent.time < min_time
-          min_time = parent.time
-        end
-      end
-
       if parent_time.nil?
-        max_time = leaves.first.time
+        min_time = leaves.first.time
       else
-        max_time = parent_time - 1
+        min_time = parent_time + 1
+      end
+
+      max_time = leaves.last.time
+      leaves.last.parents(@map).each do |parent|
+        if max_time < parent.time
+          max_time = parent.time
+        end
       end
       mark_reserved(min_time..max_time, space)
@@ -289,9 +282,5 @@ module Network
       end
       refs_cache
     end
-
-    def reversed_index(index)
-      -index - 1
-    end
   end
 end
@@ -16,6 +16,7 @@ require &#39;email_spec&#39;
 require 'sidekiq/testing/inline'
 require 'capybara/poltergeist'
 Capybara.javascript_driver = :poltergeist
+Capybara.default_wait_time = 10
 # Requires supporting ruby files with custom matchers and macros, etc,
 # in spec/support/ and its subdirectories.
	@@ -12,7 +12,7 @@		@@ -12,7 +12,7 @@
12	.graph {	12	.graph {
13	background: #f1f1f1;	13	background: #f1f1f1;
14	cursor: move;	14	cursor: move;
15	- height: 70%;	15	+ height: 500px;
16	overflow: hidden;	16	overflow: hidden;
17	}	17	}
18	}	18	}
	@@ -16,6 +16,7 @@ require 'email_spec'		@@ -16,6 +16,7 @@ require 'email_spec'
16	require 'sidekiq/testing/inline'	16	require 'sidekiq/testing/inline'
17	require 'capybara/poltergeist'	17	require 'capybara/poltergeist'
18	Capybara.javascript_driver = :poltergeist	18	Capybara.javascript_driver = :poltergeist
		19	+Capybara.default_wait_time = 10
19		20
20	# Requires supporting ruby files with custom matchers and macros, etc,	21	# Requires supporting ruby files with custom matchers and macros, etc,
21	# in spec/support/ and its subdirectories.	22	# in spec/support/ and its subdirectories.