Merge pull request #23 from dmnd/instant-display

Instant blame display, remove key throttling

Author: alexcorre

lib/controllers/blameViewController.js

@@ -1,79 +1,38 @@
-const _ = require('underscore');
 const $ = require('atom').$;
 const React = require('atom').React;
 const BlameListView = require('../views/blame-list-view');
-const errorController = require('../controllers/errorController');
 
-const TOGGLE_DEBOUNCE_TIME = 600;
 
 /**
- * Getter for the currently focused editor.
+ * Display or hide a BlameListView for the active editor.
  *
- * @return {JQuery} - The currently focused editor element.
- */
-function getFocusedEditorView () {
-  var activePane = atom.workspaceView.getActivePaneView();
-  return activePane.find('.editor.is-focused').view();
-}
-
-/**
- * If active editor is not currently blaming funs blame command for given
- * file and blamer and inserts a BlameView for the file. If blame data is already
- * shown it removes that element.
+ * If the active editor does not have an existing BlameListView, one will be
+ * mounted.
  *
- * @param {String} filePath - path to the file to blame
- * @param {Blamer} projectBlamer - a fully initialized Blamer for the current project
+ * @param {Blamer} projectBlamer - a Blamer for the current project
  */
-function toggleBlame(filePath, projectBlamer) {
-  var focusedEditor = getFocusedEditorView();
-  if (focusedEditor.blaming) {
-    // we're already blaming this container, so unmount
-    focusedEditor.blaming = false;
-    var mountPoint = focusedEditor.find('.git-blame-mount');
-    React.unmountComponentAtNode(mountPoint[0]);
-    mountPoint.remove();
+function toggleBlame(projectBlamer) {
+  var editorView = atom.workspaceView.getActiveView();
+  var editor = editorView.getEditor();
+
+  if (!editorView.blameView) {
+    // insert the BlameListView after the gutter div
+    var mountPoint = $('<div>', {'class': 'git-blame-mount'});
+    editorView.find('.gutter').after(mountPoint);
+
+    editorView.blameView = React.renderComponent(new BlameListView({
+      projectBlamer: projectBlamer,
+      filePath: editor.getPath(),
+      lineCount: editor.getLineCount(),
+      scrollbar: editorView.find('.vertical-scrollbar')
+    }), mountPoint[0]);
   } else {
-    // blame the given file + show view on success
-    projectBlamer.blame(filePath, function(err, blameData) {
-      if (err) {
-        errorController.handleError(err);
-      } else {
-        insertBlameView(blameData, focusedEditor);
-      }
-    });
+    editorView.blameView.toggle();
   }
 }
 
-/**
- * Debounced version of toggleBlame that will only allow toggleBlame function
- * to be executed 700ms after the last execution. Executes immediately the first
- * time its called.
- */
-var debouncedToggleBlame = _.debounce(toggleBlame, TOGGLE_DEBOUNCE_TIME, true);
-
-/**
- * Inserts a BlameView rendered from input blameData into its proper
- * spot within the focusedEditor.
- *
- * @param {Array|Object} blameData - array of data for a blame of each line output
- *    of blameFormatter
- * @param {JQuery} focusedEditor - the currently focused editor element in which
- *    the BlameView should be inserted
- */
-function insertBlameView(blameData, focusedEditor) {
-  // insert the BlameListView after the gutter div
-  var mountPoint = $('<div>', {'class': 'git-blame-mount'});
-  focusedEditor.find('.gutter').after(mountPoint);
-
-  React.renderComponent(new BlameListView({
-    annotations: blameData,
-    scrollbar: focusedEditor.find('.vertical-scrollbar')
-  }), mountPoint[0]);
-
-  focusedEditor.blaming = true;
-}
 
 // EXPORTS
 module.exports = {
-  toggleBlame: debouncedToggleBlame
+  toggleBlame: toggleBlame
 };

lib/git-blame.js

@@ -10,11 +10,7 @@ function activate() {
   initializeContext();
 
   // git-blame:blame
-  atom.workspaceView.command('git-blame:toggle', function() {
-    return toggleBlame();
-  });
-
-  return;
+  atom.workspaceView.command('git-blame:toggle', toggleBlame);
 }
 
 function initializeContext() {
@@ -35,11 +31,7 @@ function toggleBlame() {
   if (!projectBlamer) {
     return;
   }
-
-  var editor = atom.workspace.activePaneItem;
-  var filePath = editor.getPath();
-
-  BlameViewController.toggleBlame(filePath, projectBlamer);
+  BlameViewController.toggleBlame(projectBlamer);
 }
 
 // EXPORTS

lib/views/blame-line-view.coffee

@@ -1,15 +1,32 @@
 {$, React, Reactionary} = require 'atom'
+RP = React.PropTypes
 {div, span, a} = Reactionary
 RemoteRevision = require '../util/RemoteRevision'
 
 HASH_LENGTH = 7  # github uses this length
+BLANK_HASH = '-'.repeat(HASH_LENGTH)
+
+
+renderLoading = ->
+  div className: 'blame-line loading',
+    span className: 'hash', BLANK_HASH
+    span className: 'date', '1337-01-01'
+    span className: 'committer', 'Loading'
+
 
-module.exports =
 BlameLineComponent = React.createClass
+  propTypes:
+    date: RP.string.isRequired
+    hash: RP.string.isRequired
+    url: RP.string.isRequired
+    committer: RP.string.isRequired
+    backgroundClass: RP.string
+    noCommit: RP.bool
+
   render: ->
     if @props.noCommit
       div className: 'blame-line no-commit text-subtle',
-        span className: 'hash', '-'.repeat(HASH_LENGTH)
+        span className: 'hash', BLANK_HASH
         span className: 'date', @props.date
         span className: 'committer', 'Nobody'
     else
@@ -33,3 +50,5 @@ BlameLineComponent = React.createClass
 
   shouldComponentUpdate: ->
     false
+
+module.exports = {BlameLineComponent, renderLoading}

lib/views/blame-list-view.coffee

@@ -1,10 +1,21 @@
 {React, Reactionary, $} = require 'atom'
 {div, span, a} = Reactionary
-_ = require('underscore')
-BlameLineComponent = require './blame-line-view'
+RP = React.PropTypes
+_ = require 'underscore'
+{BlameLineComponent, renderLoading} = require './blame-line-view'
 
 
 BlameListLinesComponent = React.createClass
+  propTypes:
+    annotations: RP.arrayOf(RP.object)
+    loading: RP.bool.isRequired
+    filePath: RP.string.isRequired
+    lineCount: RP.number.isRequired
+
+  renderLoading: ->
+    lines = [0...@props.lineCount].map renderLoading
+    div null, lines
+
   # makes background color alternate by commit
   _addAlternatingBackgroundColor: (lines) ->
     bgClass = null
@@ -22,42 +33,66 @@ BlameListLinesComponent = React.createClass
       lastHash = line.hash
     lines
 
-  render: ->
+  renderLoaded: ->
     # clone so it can be modified
     lines = _.clone @props.annotations
 
     # add url to open diff
     filePath = atom.workspace.activePaneItem.getPath()
     remoteUrl = atom.project.getRepo()?.getOriginUrl(filePath)
     l['url'] = remoteUrl for l in lines
-
     @_addAlternatingBackgroundColor lines
-
     div null, lines.map BlameLineComponent
 
-  shouldComponentUpdate: ->
-    false
+  render: ->
+    if @props.loading
+      @renderLoading()
+    else
+      @renderLoaded()
+
+  shouldComponentUpdate: ({loading}) ->
+    loading isnt @props.loading
 
 
 BlameListView = React.createClass
+  propTypes:
+    projectBlamer: RP.object.isRequired
+    filePath: RP.string.isRequired
+    lineCount: RP.number.isRequired
+    scrollbar: RP.object.isRequired
+
   getInitialState: ->
     {
       # TODO: get this from the parent component somehow?
       scrollTop: @props.scrollbar.scrollTop()
       # TODO: be intelligent about persisting this so it doesn't reset
       width: 210
+      loading: true
+      visible: true
     }
 
   render: ->
-    div
-      className: 'git-blame'
-      style: width: @state.width,
-      div className: 'git-blame-resize-handle', onMouseDown: @resizeStarted
-      div className: 'git-blame-scroller',
+    display = if @state.visible then 'inline-block' else 'none'
+
+    body = if @state.error
+      div "Sorry, an error occurred."  # TODO: make this better
+    else
+      div
+        className: 'git-blame-scroller'
         div
           className: 'blame-lines'
           style: WebkitTransform: @getTransform()
-          BlameListLinesComponent annotations: @props.annotations
+          BlameListLinesComponent
+            annotations: @state.annotations
+            loading: @state.loading
+            filePath: @props.filePath
+            lineCount: @props.lineCount
+
+    div
+      className: 'git-blame'
+      style: width: @state.width, display: display
+      div className: 'git-blame-resize-handle', onMouseDown: @resizeStarted
+      body
 
   getTransform: ->
     {scrollTop} = @state
@@ -69,6 +104,28 @@ BlameListView = React.createClass
     else
       "translate(0px, #{-scrollTop}px)"
 
+  componentWillMount: ->
+    # kick off async request for blame data
+    @loadBlame true
+
+  loadBlame: (force) ->
+    return if @state.loading and not force
+
+    @setState loading: true
+    @props.projectBlamer.blame @props.filePath, (err, data) =>
+      if err
+        @setState
+          loading: false
+          error: true
+      else
+        @setState
+          loading: false
+          error: false
+          annotations: data
+
+  toggle: ->
+    @setState visible: !@state.visible
+
   componentDidMount: ->
     # Bind to scroll event on vertical-scrollbar to sync up scroll position of
     # blame gutter.