Remove diff summary from document history sidebar.

Cause of occassional memory leaks and downtime :(

app/components/DocumentHistory/DocumentHistory.js

@@ -82,12 +82,6 @@ class DocumentHistory extends React.Component<Props> {
 
   render() {
     const showLoading = !this.isLoaded && this.isFetching;
-    const maxChanges = this.revisions.reduce((acc, change) => {
-      if (acc < change.diff.added + change.diff.removed) {
-        return change.diff.added + change.diff.removed;
-      }
-      return acc;
-    }, 0);
 
     return (
       <Wrapper column>
@@ -105,7 +99,6 @@ class DocumentHistory extends React.Component<Props> {
                 key={revision.id}
                 revision={revision}
                 document={this.props.document}
-                maxChanges={maxChanges}
                 showMenu={index !== 0}
               />
             ))}

app/components/DocumentHistory/components/DiffSummary.js

@@ -1,58 +0,0 @@
-// @flow
-import * as React from 'react';
-import styled from 'styled-components';
-import Flex from 'shared/components/Flex';
-
-type Props = {
-  added: number,
-  removed: number,
-  max: number,
-  color?: string,
-  width: number,
-};
-
-export default function DiffSummary({
-  added,
-  removed,
-  max,
-  color,
-  width = 180,
-}: Props) {
-  const summary = [];
-  if (added) summary.push(`+${added}`);
-  if (removed) summary.push(`-${removed}`);
-  const hasChanges = !!summary.length;
-
-  return (
-    <Flex align="center">
-      {hasChanges && (
-        <Diff>
-          <Bar color={color} style={{ width: `${added / max * width}px` }} />
-          <Bar color={color} style={{ width: `${removed / max * width}px` }} />
-        </Diff>
-      )}
-      <Summary>{hasChanges ? summary.join(', ') : 'No changes'}</Summary>
-    </Flex>
-  );
-}
-
-const Summary = styled.div`
-  display: inline-block;
-  font-size: 10px;
-  opacity: 0.5;
-  flex-grow: 100;
-  text-transform: uppercase;
-`;
-
-const Diff = styled(Flex)`
-  height: 6px;
-  margin-right: 2px;
-`;
-
-const Bar = styled.div`
-  display: inline-block;
-  background: ${props => props.color || props.theme.text};
-  height: 100%;
-  opacity: 0.3;
-  margin-right: 1px;
-`;

app/components/DocumentHistory/components/Revision.js

@@ -9,13 +9,12 @@ import Flex from 'shared/components/Flex';
 import Time from 'shared/components/Time';
 import Avatar from 'components/Avatar';
 import RevisionMenu from 'menus/RevisionMenu';
-import DiffSummary from './DiffSummary';
 
 import { documentHistoryUrl } from 'utils/routeHelpers';
 
 class Revision extends React.Component<*> {
   render() {
-    const { revision, document, maxChanges, showMenu, theme } = this.props;
+    const { revision, document, showMenu, theme } = this.props;
 
     return (
       <StyledNavLink
@@ -31,7 +30,6 @@ class Revision extends React.Component<*> {
             {format(revision.createdAt, 'MMMM Do, YYYY h:mm a')}
           </Time>
         </Meta>
-        <DiffSummary {...revision.diff} max={maxChanges} />
         {showMenu && (
           <StyledRevisionMenu
             document={document}
@@ -58,10 +56,9 @@ const StyledRevisionMenu = styled(RevisionMenu)`
 const StyledNavLink = styled(NavLink)`
   color: ${props => props.theme.text};
   display: block;
-  padding: 16px;
+  padding: 8px 16px;
   font-size: 15px;
   position: relative;
-  height: 100px;
 `;
 
 const Author = styled(Flex)`

package.json

@@ -93,7 +93,6 @@
     "css-loader": "^0.28.7",
     "date-fns": "1.29.0",
     "debug": "2.6.9",
-    "diff": "3.5.0",
     "dotenv": "^4.0.0",
     "emoji-regex": "^6.5.1",
     "exports-loader": "^0.6.4",

server/api/documents.js

@@ -231,9 +231,7 @@ router.post('documents.revisions', auth(), pagination(), async ctx => {
   });
 
   const data = await Promise.all(
-    revisions.map((revision, index) =>
-      presentRevision(ctx, revision, revisions[index + 1])
-    )
+    revisions.map((revision, index) => presentRevision(ctx, revision))
   );
 
   ctx.body = {

server/presenters/revision.js

@@ -1,25 +1,8 @@
 // @flow
-import * as JSDiff from 'diff';
 import { Revision } from '../models';
 import presentUser from './user';
 
-function counts(changes) {
-  return changes.reduce(
-    (acc, change) => {
-      if (change.added) acc.added += change.value.length;
-      if (change.removed) acc.removed += change.value.length;
-      return acc;
-    },
-    {
-      added: 0,
-      removed: 0,
-    }
-  );
-}
-
-function present(ctx: Object, revision: Revision, previous?: Revision) {
-  const prev = previous ? previous.text : '';
-
+function present(ctx: Object, revision: Revision) {
   return {
     id: revision.id,
     documentId: revision.documentId,
@@ -27,7 +10,6 @@ function present(ctx: Object, revision: Revision, previous?: Revision) {
     text: revision.text,
     createdAt: revision.createdAt,
     createdBy: presentUser(ctx, revision.user),
-    diff: counts(JSDiff.diffChars(prev, revision.text)),
   };
 }
 

yarn.lock

@@ -2751,10 +2751,6 @@ diff@3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/diff/-/diff-3.3.1.tgz#aa8567a6eed03c531fc89d3f711cd0e5259dec75"
 
-diff@3.5.0:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
-
 diff@^3.2.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-3.3.0.tgz#056695150d7aa93237ca7e378ac3b1682b7963b9"