front end work

assets/css/app.css

@@ -198,8 +198,29 @@ input.search-input:focus {
   display: none;
 }
 
+.ghd-chunk-header {
+  height: 44px;
+}
+.ghd-chunk-header:first-child, .ghd-chunk-header:last-child {
+  height: 0;
+}
+
 .ghd-chunk-header .ghd-line-number {
   background-color: #f8fafd;
+  flex-direction: column;
+}
+
+.expanded, .expanded .ghd-line-number{
+  background-color: #f5f5f5;
+}
+
+.ghd-chunk-header .ghd-line-number div{
+  background: #dbedff;
+  width: 100%;
+  text-align: center;
+}
+.ghd-chunk-header .ghd-line-number div:hover{
+  background: #95c6fe;
 }
 
 .ghd-file-status {

assets/js/app.js

@@ -57,3 +57,77 @@ fileHeaders.forEach(header => {
 const scrollIfNeeded = elem => {
   elem.getBoundingClientRect().top < 0 && elem.scrollIntoView(true)
 }
+
+const MAX_EXPAND_CONTEXT_LINES = 20
+
+document.addEventListener('DOMContentLoaded', e => {
+  document.querySelectorAll('.ghd-expand-up').forEach(expandUp => {
+    expandUp.addEventListener('click', e => {
+      const {fileName, packageName, version, lineAfter, lineBefore, patch} = gatherInfo(expandUp)
+
+      // expandUp always follows by diff line.. so we take the number
+      const toLine = numberFrom(lineAfter) - 1
+
+      const _fromLine = lineBefore ? numberFrom(lineBefore) + 1 : 1
+      const fromLine = Math.max(toLine - MAX_EXPAND_CONTEXT_LINES, _fromLine)
+
+      const _rightLine = lineBefore ? numberTo(lineBefore) + 1 : 1
+      const rightLine = Math.max(toLine - MAX_EXPAND_CONTEXT_LINES, _rightLine)
+
+      fetchChunkAndInsert({target: lineAfter, packageName, version, fromLine, toLine, rightLine, fileName, patch})
+    })
+  })
+
+  document.querySelectorAll('.ghd-expand-down').forEach(expandDown => {
+    expandDown.addEventListener('click', e => {
+      const {fileName, packageName, version, lineAfter, lineBefore, patch} = gatherInfo(expandDown)
+
+      const fromLine = numberFrom(lineBefore) + 1
+      const rightLine = numberTo(lineBefore) + 1
+
+      const _toLine = lineAfter ? numberFrom(lineAfter) - 1 : Infinity
+      const toLine = Math.min(fromLine + MAX_EXPAND_CONTEXT_LINES, _toLine)
+
+      fetchChunkAndInsert({target: expandDown.closest('tr'), packageName, version, fromLine, toLine, rightLine, fileName, patch})
+
+    })
+  })
+})
+
+const numberFrom = line => parseInt(line.querySelector('.ghd-line-number .ghd-line-number-from').textContent.trim())
+const numberTo = line => parseInt(line.querySelector('.ghd-line-number .ghd-line-number-to').textContent.trim())
+
+const gatherInfo = line => {
+  const patch = line.closest('.ghd-file')
+  const {fileName, packageName, version} = patch.querySelector('.ghd-file-header').dataset
+
+  const lineAfter = line.closest('tr').nextElementSibling
+  const lineBefore = line.closest('tr').previousElementSibling
+
+  return {fileName, packageName, version, lineAfter, lineBefore, patch}
+}
+
+const fetchChunkAndInsert = params => {
+  if( !(params.fromLine && params.toLine) ||
+      (params.fromLine >= params.toLine) ){
+    return
+  }
+
+  const path = `/diff/${params.packageName}/${params.version}/expand/${params.fromLine}/${params.toLine}/${params.rightLine}`
+  const url = new URL(path, window.location)
+  url.searchParams.append('file_name', params.fileName)
+
+  fetch(url)
+  .then(response => response.json())
+  .then(({chunk, lines, errors}) => {
+    if(errors){return}
+    const context = document.createElement('template')
+    context.innerHTML = chunk.trim()
+    const patchBody = params.patch.querySelector('tbody')
+
+    Array.prototype.reduceRight.call(context.content.childNodes, (target, line) => {
+      return patchBody.insertBefore(line, target)
+    }, params.target)
+  })
+  .catch(console.error)
+}

lib/diff_web/controllers/page_controller.ex

@@ -179,7 +179,11 @@ defmodule DiffWeb.PageController do
       Enum.each(stream, fn
         {:ok, patch} ->
           html_patch =
-            Phoenix.View.render_to_iodata(DiffWeb.RenderView, "render.html", patch: patch)
+            Phoenix.View.render_to_iodata(DiffWeb.RenderView, "render.html",
+              patch: patch,
+              package: package,
+              from_version: from
+            )
 
           IO.binwrite(file, html_patch)
 

lib/diff_web/templates/render/render.html.eex

@@ -1,6 +1,6 @@
 <% status = patch_status(@patch) %>
 <div class="ghd-file">
-  <div class="ghd-file-header">
+  <div class="ghd-file-header" data-file-name="<%= @patch.from %>" data-package-name="<%= @package %>" data-version="<%= @from_version %>" >
     <span class="ghd-file-status ghd-file-status-<%= status %>">
       <%= status %>
     </span>
@@ -10,11 +10,13 @@
   </div>
   <div class="ghd-diff">
     <table class="ghd-diff">
-      <%= for chunk <- @patch.chunks do %>
+      <%= for {chunk, index} <- Enum.with_index(@patch.chunks) do %>
         <tr class="ghd-chunk-header">
           <td class="ghd-line-number">
-            <div class="ghd-line-number-from">&nbsp;</div>
-            <div class="ghd-line-number-to"></div>
+            <%= unless index == 0 do %>
+              <div class="ghd-expand-down"><svg class="octicon octicon-fold-down" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 11l3 3 3-3H8V5H6v6H4zm-4 0c0 .55.45 1 1 1h2.5l-1-1h-1l2-2H5V8H3.5l-2-2H5V5H1c-.55 0-1 .45-1 1l2.5 2.5L0 11zm10.5-2H9V8h1.5l2-2H9V5h4c.55 0 1 .45 1 1l-2.5 2.5L14 11c0 .55-.45 1-1 1h-2.5l1-1h1l-2-2z"></path></svg></div>
+            <% end %>
+            <div class="ghd-expand-up"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 16" width="14" height="16"><path fill-rule="evenodd" d="M10 6L7 3 4 6h2v6h2V6h2zm4 0c0-.55-.45-1-1-1h-2.5l1 1h1l-2 2H9v1h1.5l2 2H9v1h4c.55 0 1-.45 1-1l-2.5-2.5L14 6zM3.5 8H5v1H3.5l-2 2H5v1H1c-.55 0-1-.45-1-1l2.5-2.5L0 6c0-.55.45-1 1-1h2.5l-1 1h-1l2 2z"></path></svg></div>
           </td>
           <td class="ghd-text">
             <div class="ghd-text-internal"><%= chunk.header %></div>
@@ -36,6 +38,14 @@
           </tr>
         <% end %>
       <% end %>
+      <tr class="ghd-chunk-header">
+        <td class="ghd-line-number">
+          <div class="ghd-expand-down"><svg class="octicon octicon-fold-down" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 11l3 3 3-3H8V5H6v6H4zm-4 0c0 .55.45 1 1 1h2.5l-1-1h-1l2-2H5V8H3.5l-2-2H5V5H1c-.55 0-1 .45-1 1l2.5 2.5L0 11zm10.5-2H9V8h1.5l2-2H9V5h4c.55 0 1 .45 1 1l-2.5 2.5L14 11c0 .55-.45 1-1 1h-2.5l1-1h1l-2-2z"></path></svg></div>
+        </td>
+        <td class="ghd-text">
+          <div class="ghd-text-internal"></div>
+        </td>
+      </tr>
     </table>
   </div>
 </div>