From a665dbd88e8980085a5645962cd7583a47e26e1e Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 21 Nov 2017 18:07:00 +0100
Subject: [PATCH 01/36] Reproduce modqueue freeze issue

---
 .../coral-embed-stream/src/components/Stream.js | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/client/coral-embed-stream/src/components/Stream.js b/client/coral-embed-stream/src/components/Stream.js
index 7ff48106b..69879d467 100644
--- a/client/coral-embed-stream/src/components/Stream.js
+++ b/client/coral-embed-stream/src/components/Stream.js
@@ -196,6 +196,15 @@ class Stream extends React.Component {
     );
   }
 
+  launchDeathStar = () => {
+    for (let i = 0; i < 20; i++) {
+      this.props.postComment({
+        asset_id: this.props.root.asset.id,
+        body: 'death is certain',
+      });
+    }
+  }
+
   render() {
     const {
       data,
@@ -231,6 +240,12 @@ class Stream extends React.Component {
     return (
       <div id="stream" className={styles.root}>
         <AutomaticAssetClosure assetId={asset.id} closedAt={asset.closedAt}/>
+        <Button
+          cStyle="darkGrey"
+          onClick={this.launchDeathStar}
+        >
+          Launch Death Star
+        </Button>
         {highlightedComment &&
           <Button
             cStyle="darkGrey"
@@ -325,7 +340,7 @@ Stream.propTypes = {
   loading: PropTypes.bool,
   editName: PropTypes.func,
   appendItemArray: PropTypes.func,
-  updateItem: PropTypes.func, 
+  updateItem: PropTypes.func,
   viewAllComments: PropTypes.func,
   notify: PropTypes.func.isRequired,
   postComment: PropTypes.func.isRequired,

From cf96d07a7adb7a5130f4f6713a30d3355b6c25d5 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 29 Nov 2017 11:54:51 +0100
Subject: [PATCH 02/36] Better death star

---
 .../src/components/Stream.js                  | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/client/coral-embed-stream/src/components/Stream.js b/client/coral-embed-stream/src/components/Stream.js
index 69879d467..ed970d500 100644
--- a/client/coral-embed-stream/src/components/Stream.js
+++ b/client/coral-embed-stream/src/components/Stream.js
@@ -197,12 +197,20 @@ class Stream extends React.Component {
   }
 
   launchDeathStar = () => {
-    for (let i = 0; i < 20; i++) {
-      this.props.postComment({
-        asset_id: this.props.root.asset.id,
-        body: 'death is certain',
-      });
-    }
+    let i = 100;
+    const launch = () => {
+      setTimeout(() => {
+        this.props.postComment({
+          asset_id: this.props.root.asset.id,
+          body: 'death is certain',
+        });
+        i--;
+        if (i > 0) {
+          launch();
+        }
+      }, 500);
+    };
+    launch();
   }
 
   render() {

From 1b9c2404db489a1512c0fc2c6582649abb6cbbdf Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Wed, 29 Nov 2017 15:57:28 -0700
Subject: [PATCH 03/36] fixed job cli, reverted comment box pending beheviour

---
 bin/cli-jobs                                  | 67 ++++++++++++-------
 .../src/tabs/stream/components/Stream.js      |  3 +-
 services/kue.js                               | 15 +++++
 3 files changed, 60 insertions(+), 25 deletions(-)

diff --git a/bin/cli-jobs b/bin/cli-jobs
index c5aefc518..6048a69db 100755
--- a/bin/cli-jobs
+++ b/bin/cli-jobs
@@ -12,7 +12,7 @@ const mongoose = require('../services/mongoose');
 const kue = require('../services/kue');
 
 util.onshutdown([
-  () => mongoose.disconnect()
+  () => mongoose.disconnect(),
 ]);
 
 /**
@@ -20,17 +20,17 @@ util.onshutdown([
  */
 function processJobs() {
 
-  // Start the scraper processor.
-  scraper.process();
-
-  // Start the mail processor.
-  mailer.process();
-
   // The scraper only needs to shutdown when the scraper has actually been
   // started.
   util.onshutdown([
     () => kue.Task.shutdown()
   ]);
+
+  // Start the scraper processor.
+  scraper.process();
+
+  // Start the mail processor.
+  mailer.process();
 }
 
 /**
@@ -48,22 +48,13 @@ function removeJob(job) {
   }));
 }
 
-/**
- * Removes the jobs passed in and returns a promise.
- * @param  {Array} jobs array of jobs
- * @return {Promise}
- */
-function removeJobs(jobs) {
-  return Promise.all(jobs.map(removeJob));
-}
-
 /**
  * Get the top n jobs with a specific state.
  * @param  {String} [state='complete'] state to list jobs by
  * @param  {Number} limit              limit of jobs to load
  * @return {Promise}
  */
-function rangeJobsByState(state = 'complete', limit) {
+function rangeJobsByState(state, limit) {
   return new Promise((resolve, reject) => {
     kue.Job.rangeByState(state, 0, limit, 'asc', (err, jobs) => {
       if (err) {
@@ -75,22 +66,52 @@ function rangeJobsByState(state = 'complete', limit) {
   });
 }
 
+async function getJobBatch(n, includeStuck) {
+  let jobs = [];
+
+  jobs = await rangeJobsByState('complete', n);
+
+  if (includeStuck) {
+    jobs = jobs.concat(await rangeJobsByState('failed', n));
+  }
+
+  return jobs;
+}
+
 /**
  * Cleans up the jobs that are in the queue.
  */
 async function cleanupJobs(options) {
+
+  // The scraper only needs to shutdown when the scraper has actually been
+  // started.
+  util.onshutdown([
+    () => kue.Task.shutdown()
+  ]);
+
   const n = 100;
 
   try {
-    const joblists = await Promise.all([
-      rangeJobsByState('complete', n),
-      options.stuck ? rangeJobsByState('failed', n) : false
-    ]);
 
-    await joblists.filter((jobs) => jobs).map(removeJobs);
+    // Connect to redis by establishing a queue.
+    kue.Task.connect();
+
+    let jobCount = 0;
+    let jobs = await getJobBatch(n, options.stuck);
+
+    while (jobs.length > 0) {
+
+      // Remove all the jobs.
+      await Promise.all(jobs.map((job) => removeJob(job)));
+
+      jobCount += jobs.length;
+
+      // Get the next batch of jobs.
+      jobs = await getJobBatch(n, options.stuck);
+    }
 
     util.shutdown();
-    console.log('Removed old jobs');
+    console.log(`Removed ${jobCount} jobs`);
   } catch (err) {
     console.error(err);
     util.shutdown(1);
diff --git a/client/coral-embed-stream/src/tabs/stream/components/Stream.js b/client/coral-embed-stream/src/tabs/stream/components/Stream.js
index b5f45b8e5..4e09ef86f 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/Stream.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/Stream.js
@@ -224,14 +224,13 @@ class Stream extends React.Component {
     const open = !asset.isClosed;
 
     const banned = user && user.status === 'BANNED';
-    const pending = user && user.status === 'PENDING';
 
     const temporarilySuspended =
       user &&
       user.suspension.until &&
       new Date(user.suspension.until) > new Date();
 
-    const showCommentBox = loggedIn && ((!banned && !pending & !temporarilySuspended && !highlightedComment) || keepCommentBox);
+    const showCommentBox = loggedIn && ((!banned && !temporarilySuspended && !highlightedComment) || keepCommentBox);
     const slotProps = {data};
     const slotQueryData = {root, asset};
 
diff --git a/services/kue.js b/services/kue.js
index 0fa610faa..01806632e 100644
--- a/services/kue.js
+++ b/services/kue.js
@@ -21,6 +21,9 @@ const getQueue = () => {
     }
   });
 
+  // Watch for stuck jobs to manage.
+  queue.watchStuckJobs(1000);
+
   return queue;
 };
 
@@ -47,6 +50,7 @@ class Task {
         .attempts(this.attempts)
         .delay(this.delay)
         .backoff({type: 'exponential'})
+        .removeOnComplete(true)
         .save((err) => {
           if (err) {
             return reject(err);
@@ -66,6 +70,15 @@ class Task {
     return getQueue().process(this.name, callback);
   }
 
+  /**
+   * Connect to redis now by getting the queue.
+   */
+  static connect() {
+
+    // Force setup the redis connection for kue.
+    getQueue();
+  }
+
   /**
    * Shutdown running jobs.
    */
@@ -145,3 +158,5 @@ if (process.env.NODE_ENV === 'test') {
   module.exports.Task = Task;
 }
 
+// Add the job reference to the exported params.
+module.exports.Job = kue.Job;

From ab772839c52cc71b3a129b0d2655e467ae4f3c73 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 30 Nov 2017 16:38:38 +0100
Subject: [PATCH 04/36] Debounce and batch subscription updates

---
 .../Moderation/containers/Moderation.js       |  2 +-
 .../src/components/Stream.js                  |  2 +-
 client/coral-framework/hocs/withQuery.js      | 78 ++++++++++++++++++-
 3 files changed, 77 insertions(+), 5 deletions(-)

diff --git a/client/coral-admin/src/routes/Moderation/containers/Moderation.js b/client/coral-admin/src/routes/Moderation/containers/Moderation.js
index 1b75d23cc..69c8edb43 100644
--- a/client/coral-admin/src/routes/Moderation/containers/Moderation.js
+++ b/client/coral-admin/src/routes/Moderation/containers/Moderation.js
@@ -138,7 +138,7 @@ class ModerationContainer extends Component {
       },
     ];
 
-    this.subscriptions = parameters.map((param) => this.props.data.subscribeToMore(param));
+    this.subscriptions = parameters.map((param) => this.props.data.subscribeToMoreDebounced(param));
   }
 
   unsubscribe() {
diff --git a/client/coral-embed-stream/src/components/Stream.js b/client/coral-embed-stream/src/components/Stream.js
index ed970d500..4c2d10a99 100644
--- a/client/coral-embed-stream/src/components/Stream.js
+++ b/client/coral-embed-stream/src/components/Stream.js
@@ -208,7 +208,7 @@ class Stream extends React.Component {
         if (i > 0) {
           launch();
         }
-      }, 500);
+      }, 100);
     };
     launch();
   }
diff --git a/client/coral-framework/hocs/withQuery.js b/client/coral-framework/hocs/withQuery.js
index 9548827ac..d95b6945d 100644
--- a/client/coral-framework/hocs/withQuery.js
+++ b/client/coral-framework/hocs/withQuery.js
@@ -3,6 +3,9 @@ import {graphql} from 'react-apollo';
 import {getDefinitionName, separateDataAndRoot, getResponseErrors} from '../utils';
 import PropTypes from 'prop-types';
 import hoistStatics from 'recompose/hoistStatics';
+import {getOperationName} from 'apollo-client/queries/getFromAST';
+import {addTypenameToDocument} from 'apollo-client/queries/queryTransform';
+import debounce from 'lodash/debounce';
 
 const withSkipOnErrors = (reducer) => (prev, action, ...rest) => {
   if (action.type === 'APOLLO_MUTATION_RESULT' && getResponseErrors(action.result)) {
@@ -40,10 +43,12 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
     static contextTypes = {
       eventEmitter: PropTypes.object,
       graphqlRegistry: PropTypes.object,
+      client: PropTypes.object,
     };
 
     // Lazily resolve fragments from graphRegistry to support circular dependencies.
     memoized = null;
+    resolvedDocument = null;
     lastNetworkStatus = null;
     data = null;
     name = '';
@@ -52,6 +57,10 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
       return this.context.graphqlRegistry;
     }
 
+    get client() {
+      return this.context.client;
+    }
+
     resolveDocument(documentOrCallback) {
       const document = typeof documentOrCallback === 'function'
         ? documentOrCallback(this.props, this.context)
@@ -72,6 +81,68 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
       this.context.eventEmitter.emit(`query.${this.name}.${status}`, {variables, data: root});
     }
 
+    subscribeToMoreDebounced = ({document, variables, updateQuery}) => {
+
+      // We need to add the typenames and resolve fragments.
+      const rootQuery = addTypenameToDocument(this.resolvedDocument);
+      const query = addTypenameToDocument(this.graphqlRegistry.resolveFragments(document));
+      let batched = [];
+
+      // Process data in a batched fashion.
+      const processData = () => {
+        const variables = typeof this.wrappedOptions === 'function'
+          ? this.wrappedOptions(this.props).variables
+          : this.wrappedOptions.variables;
+        const previousResult = this.client.readQuery({
+          query: rootQuery,
+          variables,
+        });
+
+        let result = previousResult;
+
+        batched.forEach((data) => {
+          result = updateQuery(result, {subscriptionData: {data}});
+        });
+
+        if (result !== previousResult) {
+          this.client.writeQuery({
+            query: rootQuery,
+            variables,
+            data: result,
+          });
+        }
+        batched = [];
+      };
+
+      // Debounce to handle high loads of traffic.
+      const processDataDebounced = debounce(processData, 250, {'maxWait': 2000});
+
+      const handler = (error, data) => {
+        if (error) {
+
+          // TODO: shuld this show a notification?
+          console.error(error);
+          return;
+        }
+        if (data) {
+          batched.push(data);
+          processDataDebounced();
+        }
+      };
+
+      // Start subscription.
+      const request = {
+        query,
+        variables,
+        operationName: getOperationName(query),
+      };
+
+      const id = this.client.networkInterface.subscribe(request, handler);
+
+      // Return unsubscribe callback.
+      return () => this.client.networkInterface.unsubscribe(id);
+    };
+
     nextData(data) {
       this.emitWhenNeeded(data);
 
@@ -102,6 +173,7 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
           stopPolling: data.stopPolling,
           refetch: data.refetch,
           updateQuery: data.updateQuery,
+          subscribeToMoreDebounced: this.subscribeToMoreDebounced,
           subscribeToMore: (stmArgs) => {
             const resolvedDocument = this.resolveDocument(stmArgs.document);
 
@@ -190,10 +262,10 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
 
     getWrapped = () => {
       if (!this.memoized) {
-        const resolvedDocument = this.resolveDocument(document);
-        this.name = getDefinitionName(resolvedDocument);
+        this.resolvedDocument = this.resolveDocument(document);
+        this.name = getDefinitionName(this.resolvedDocument);
         this.memoized = graphql(
-          resolvedDocument,
+          this.resolvedDocument,
           {...this.wrappedConfig, options: this.wrappedOptions},
         )(WrappedComponent);
       }

From af3542aec5d3f564efef6f9b83a4ae696ceba757 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 30 Nov 2017 15:30:21 -0300
Subject: [PATCH 05/36] adding and enabling question box

---
 .../src/tabs/stream/components/Stream.js      | 30 +++++++++++--------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/client/coral-embed-stream/src/tabs/stream/components/Stream.js b/client/coral-embed-stream/src/tabs/stream/components/Stream.js
index 4e09ef86f..c81a5d797 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/Stream.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/Stream.js
@@ -213,7 +213,12 @@ class Stream extends React.Component {
       root,
       appendItemArray,
       asset,
-      asset: {comment: highlightedComment},
+      asset: {
+        comment: highlightedComment,
+        settings: {
+          questionBoxEnable,
+        }
+      },
       postComment,
       notify,
       updateItem,
@@ -246,18 +251,17 @@ class Stream extends React.Component {
               content={asset.settings.infoBoxContent}
               enable={asset.settings.infoBoxEnable}
             />
-            <QuestionBox
-              content={asset.settings.questionBoxContent}
-              enable={asset.settings.questionBoxEnable}
-              icon={asset.settings.questionBoxIcon}
-            >
-              <Slot
-                fill="streamQuestionArea"
-                queryData={slotQueryData}
-                {...slotProps}
-              />
-            </QuestionBox>
-
+            {questionBoxEnable && (
+              <QuestionBox 
+                content={asset.settings.questionBoxContent}
+                icon={asset.settings.questionBoxIcon}>
+                <Slot
+                  fill="streamQuestionArea"
+                  queryData={slotQueryData}
+                  {...slotProps}
+                />
+              </QuestionBox>
+            )}
             {!banned &&
                 temporarilySuspended &&
                 <RestrictedMessageBox>

From 06ddb30d7732ab4f2a3a440d9d4584f3a58eff31 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 30 Nov 2017 20:26:08 +0100
Subject: [PATCH 06/36] Decouple apollo store

---
 .../src/containers/StreamTabPanel.js                |  3 +--
 client/coral-framework/components/IfSlotIsEmpty.js  |  3 +--
 .../coral-framework/components/IfSlotIsNotEmpty.js  |  3 +--
 client/coral-framework/components/Slot.js           |  3 +--
 client/coral-framework/components/TalkProvider.js   |  6 ++++--
 client/coral-framework/services/bootstrap.js        | 13 ++++++++++---
 6 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/client/coral-embed-stream/src/containers/StreamTabPanel.js b/client/coral-embed-stream/src/containers/StreamTabPanel.js
index 9a154512d..d3dadb5d2 100644
--- a/client/coral-embed-stream/src/containers/StreamTabPanel.js
+++ b/client/coral-embed-stream/src/containers/StreamTabPanel.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import StreamTabPanel from '../components/StreamTabPanel';
 import {connect} from 'react-redux';
-import omit from 'lodash/omit';
 import {Tab, TabPane} from 'coral-ui';
 import {getShallowChanges} from 'coral-framework/utils';
 import isEqual from 'lodash/isEqual';
@@ -106,7 +105,7 @@ StreamTabPanelContainer.propTypes = {
 };
 
 const mapStateToProps = (state) => ({
-  reduxState: omit(state, 'apollo'),
+  reduxState: state,
 });
 
 export default connect(mapStateToProps, null)(StreamTabPanelContainer);
diff --git a/client/coral-framework/components/IfSlotIsEmpty.js b/client/coral-framework/components/IfSlotIsEmpty.js
index 51a849448..8470fadba 100644
--- a/client/coral-framework/components/IfSlotIsEmpty.js
+++ b/client/coral-framework/components/IfSlotIsEmpty.js
@@ -1,7 +1,6 @@
 import React, {Children} from 'react';
 import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
-import omit from 'lodash/omit';
 import {getShallowChanges} from 'coral-framework/utils';
 
 class IfSlotIsEmpty extends React.Component {
@@ -39,7 +38,7 @@ IfSlotIsEmpty.propTypes = {
 };
 
 const mapStateToProps = (state) => ({
-  reduxState: omit(state, 'apollo'),
+  reduxState: state,
 });
 
 export default connect(mapStateToProps, null)(IfSlotIsEmpty);
diff --git a/client/coral-framework/components/IfSlotIsNotEmpty.js b/client/coral-framework/components/IfSlotIsNotEmpty.js
index 6186e2166..a498ad3aa 100644
--- a/client/coral-framework/components/IfSlotIsNotEmpty.js
+++ b/client/coral-framework/components/IfSlotIsNotEmpty.js
@@ -1,7 +1,6 @@
 import React, {Children} from 'react';
 import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
-import omit from 'lodash/omit';
 import {getShallowChanges} from 'coral-framework/utils';
 
 class IfSlotIsNotEmpty extends React.Component {
@@ -39,7 +38,7 @@ IfSlotIsNotEmpty.propTypes = {
 };
 
 const mapStateToProps = (state) => ({
-  reduxState: omit(state, 'apollo'),
+  reduxState: state,
 });
 
 export default connect(mapStateToProps, null)(IfSlotIsNotEmpty);
diff --git a/client/coral-framework/components/Slot.js b/client/coral-framework/components/Slot.js
index e1acd82f4..0404df80f 100644
--- a/client/coral-framework/components/Slot.js
+++ b/client/coral-framework/components/Slot.js
@@ -2,7 +2,6 @@ import React from 'react';
 import cn from 'classnames';
 import styles from './Slot.css';
 import {connect} from 'react-redux';
-import omit from 'lodash/omit';
 import kebabCase from 'lodash/kebabCase';
 import PropTypes from 'prop-types';
 import isEqual from 'lodash/isEqual';
@@ -121,7 +120,7 @@ Slot.propTypes = {
 };
 
 const mapStateToProps = (state) => ({
-  reduxState: omit(state, 'apollo'),
+  reduxState: state,
 });
 
 export default connect(mapStateToProps, null)(Slot);
diff --git a/client/coral-framework/components/TalkProvider.js b/client/coral-framework/components/TalkProvider.js
index 418bb3760..880b4c9d9 100644
--- a/client/coral-framework/components/TalkProvider.js
+++ b/client/coral-framework/components/TalkProvider.js
@@ -13,13 +13,14 @@ class TalkProvider extends React.Component {
       notification: this.props.notification,
       storage: this.props.storage,
       history: this.props.history,
+      store: this.props.store,
     };
   }
 
   render() {
-    const {children, client, store} = this.props;
+    const {children, client} = this.props;
     return (
-      <ApolloProvider client={client} store={store}>
+      <ApolloProvider client={client}>
         {children}
       </ApolloProvider>
     );
@@ -35,6 +36,7 @@ TalkProvider.childContextTypes = {
   notification: PropTypes.object,
   storage: PropTypes.object,
   history: PropTypes.object,
+  store: PropTypes.object,
 };
 
 export default TalkProvider;
diff --git a/client/coral-framework/services/bootstrap.js b/client/coral-framework/services/bootstrap.js
index 85144fe60..9862ff23c 100644
--- a/client/coral-framework/services/bootstrap.js
+++ b/client/coral-framework/services/bootstrap.js
@@ -159,21 +159,28 @@ export async function createContext({
     pym.sendMessage('event', JSON.stringify({eventName, value}));
   });
 
+  // Create our redux store.
   const finalReducers = {
     ...reducers,
     ...plugins.getReducers(),
-    apollo: client.reducer(),
   };
 
   store = createStore(finalReducers, [
-    client.middleware(),
     thunk.withExtraArgument(context),
-    apolloErrorReporter,
     createReduxEmitter(eventEmitter),
   ]);
 
   context.store = store;
 
+  // Create apollo redux store.
+  context.apolloStore = createStore({
+    apollo: client.reducer(),
+  }, [
+    client.middleware(),
+    apolloErrorReporter,
+    createReduxEmitter(eventEmitter),
+  ]);
+
   // Run pre initialization.
   if (preInit) {
     await preInit(context);

From 65be2b89a40817362f05b18eb67c5bfd155037e9 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 30 Nov 2017 21:44:32 +0100
Subject: [PATCH 07/36] Throttle instead of debounce

---
 .../src/routes/Moderation/containers/Moderation.js   |  2 +-
 client/coral-framework/hocs/withQuery.js             | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/client/coral-admin/src/routes/Moderation/containers/Moderation.js b/client/coral-admin/src/routes/Moderation/containers/Moderation.js
index 69c8edb43..ca6f0224a 100644
--- a/client/coral-admin/src/routes/Moderation/containers/Moderation.js
+++ b/client/coral-admin/src/routes/Moderation/containers/Moderation.js
@@ -138,7 +138,7 @@ class ModerationContainer extends Component {
       },
     ];
 
-    this.subscriptions = parameters.map((param) => this.props.data.subscribeToMoreDebounced(param));
+    this.subscriptions = parameters.map((param) => this.props.data.subscribeToMoreThrottled(param));
   }
 
   unsubscribe() {
diff --git a/client/coral-framework/hocs/withQuery.js b/client/coral-framework/hocs/withQuery.js
index d95b6945d..7a0eb1034 100644
--- a/client/coral-framework/hocs/withQuery.js
+++ b/client/coral-framework/hocs/withQuery.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import hoistStatics from 'recompose/hoistStatics';
 import {getOperationName} from 'apollo-client/queries/getFromAST';
 import {addTypenameToDocument} from 'apollo-client/queries/queryTransform';
-import debounce from 'lodash/debounce';
+import throttle from 'lodash/throttle';
 
 const withSkipOnErrors = (reducer) => (prev, action, ...rest) => {
   if (action.type === 'APOLLO_MUTATION_RESULT' && getResponseErrors(action.result)) {
@@ -81,7 +81,7 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
       this.context.eventEmitter.emit(`query.${this.name}.${status}`, {variables, data: root});
     }
 
-    subscribeToMoreDebounced = ({document, variables, updateQuery}) => {
+    subscribeToMoreThrottled = ({document, variables, updateQuery}, wait = 1000) => {
 
       // We need to add the typenames and resolve fragments.
       const rootQuery = addTypenameToDocument(this.resolvedDocument);
@@ -114,8 +114,8 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
         batched = [];
       };
 
-      // Debounce to handle high loads of traffic.
-      const processDataDebounced = debounce(processData, 250, {'maxWait': 2000});
+      // throttle to handle high loads of traffic.
+      const processDataThrottled = throttle(processData, wait);
 
       const handler = (error, data) => {
         if (error) {
@@ -126,7 +126,7 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
         }
         if (data) {
           batched.push(data);
-          processDataDebounced();
+          processDataThrottled();
         }
       };
 
@@ -173,7 +173,7 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
           stopPolling: data.stopPolling,
           refetch: data.refetch,
           updateQuery: data.updateQuery,
-          subscribeToMoreDebounced: this.subscribeToMoreDebounced,
+          subscribeToMoreThrottled: this.subscribeToMoreThrottled,
           subscribeToMore: (stmArgs) => {
             const resolvedDocument = this.resolveDocument(stmArgs.document);
 

From 3db7439d767dfbc115ce8bb9792c7793ac69c6db Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 30 Nov 2017 21:55:16 +0100
Subject: [PATCH 08/36] Use custom optimized graphql-anywhere

---
 client/coral-framework/hocs/withQuery.js | 1 +
 package.json                             | 2 +-
 webpack.config.js                        | 1 +
 yarn.lock                                | 6 +++++-
 4 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/client/coral-framework/hocs/withQuery.js b/client/coral-framework/hocs/withQuery.js
index 7a0eb1034..3a070cfbd 100644
--- a/client/coral-framework/hocs/withQuery.js
+++ b/client/coral-framework/hocs/withQuery.js
@@ -93,6 +93,7 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
         const variables = typeof this.wrappedOptions === 'function'
           ? this.wrappedOptions(this.props).variables
           : this.wrappedOptions.variables;
+
         const previousResult = this.client.readQuery({
           query: rootQuery,
           variables,
diff --git a/package.json b/package.json
index 196effd71..c616ef8e8 100644
--- a/package.json
+++ b/package.json
@@ -105,7 +105,7 @@
     "fs-extra": "^4.0.1",
     "gql-merge": "^0.0.4",
     "graphql": "^0.9.1",
-    "graphql-anywhere": "^3.1.0",
+    "graphql-anywhere-optimized": "git+https://git@github.com/cvle/graphql-anywhere#optimized",
     "graphql-docs": "0.2.0",
     "graphql-errors": "^2.1.0",
     "graphql-redis-subscriptions": "1.3.0",
diff --git a/webpack.config.js b/webpack.config.js
index d9c8ba4a0..8e510a3f0 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -120,6 +120,7 @@ const config = {
   },
   resolve: {
     alias: {
+      'graphql-anywhere': 'graphql-anywhere-optimized',
       'plugin-api': path.resolve(__dirname, 'plugin-api/'),
       plugins: path.resolve(__dirname, 'plugins/'),
       pluginsConfig: pluginsPath
diff --git a/yarn.lock b/yarn.lock
index 7996e549f..ea35ec342 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3507,7 +3507,11 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.4, graceful-fs@^4.1.6:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
 
-graphql-anywhere@^3.0.1, graphql-anywhere@^3.1.0:
+"graphql-anywhere-optimized@git+https://git@github.com/cvle/graphql-anywhere#optimized":
+  version "3.1.0"
+  resolved "git+https://git@github.com/cvle/graphql-anywhere#7338ffed17ff27d79e56ae09ad4adeea33c21388"
+
+graphql-anywhere@^3.0.1:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/graphql-anywhere/-/graphql-anywhere-3.1.0.tgz#3ea0d8e8646b5cee68035016a9a7557c15c21e96"
 

From 214de045fbe205123dbfae5787706c40e249837d Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 30 Nov 2017 22:44:29 +0100
Subject: [PATCH 09/36] One subscription queue per query

---
 .../src/tabs/stream/components/Stream.js      |  2 +-
 client/coral-framework/hocs/withQuery.js      | 81 ++++++++++---------
 2 files changed, 44 insertions(+), 39 deletions(-)

diff --git a/client/coral-embed-stream/src/tabs/stream/components/Stream.js b/client/coral-embed-stream/src/tabs/stream/components/Stream.js
index 046b0f1df..2bd131cb0 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/Stream.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/Stream.js
@@ -212,7 +212,7 @@ class Stream extends React.Component {
     const launch = () => {
       setTimeout(() => {
         this.props.postComment({
-          asset_id: this.props.root.asset.id,
+          asset_id: this.props.asset.id,
           body: 'death is certain',
         });
         i--;
diff --git a/client/coral-framework/hocs/withQuery.js b/client/coral-framework/hocs/withQuery.js
index 3a070cfbd..eaf740ffb 100644
--- a/client/coral-framework/hocs/withQuery.js
+++ b/client/coral-framework/hocs/withQuery.js
@@ -53,6 +53,9 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
     data = null;
     name = '';
 
+    // Pending subscription data.
+    subscriptionQueue = [];
+
     get graphqlRegistry() {
       return this.context.graphqlRegistry;
     }
@@ -62,10 +65,15 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
     }
 
     resolveDocument(documentOrCallback) {
-      const document = typeof documentOrCallback === 'function'
+      let document = typeof documentOrCallback === 'function'
         ? documentOrCallback(this.props, this.context)
         : documentOrCallback;
-      return this.graphqlRegistry.resolveFragments(document);
+      document = this.graphqlRegistry.resolveFragments(document);
+
+      // We also add typenames to the document which apollo would usually do,
+      // but we also use the network interface in subscriptions directly
+      // which require the resolved typenames.
+      return addTypenameToDocument(document);
     }
 
     emitWhenNeeded(data) {
@@ -81,43 +89,38 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
       this.context.eventEmitter.emit(`query.${this.name}.${status}`, {variables, data: root});
     }
 
-    subscribeToMoreThrottled = ({document, variables, updateQuery}, wait = 1000) => {
+    // Handle any pending susbcription data in the subscription queue at max once every second.
+    // Updates are batched in written into apollo in one go.
+    processSubscriptionQueue = throttle(() => {
+      const variables = typeof this.wrappedOptions === 'function'
+        ? this.wrappedOptions(this.props).variables
+        : this.wrappedOptions.variables;
+
+      const previousResult = this.client.readQuery({
+        query: this.resolvedDocument,
+        variables,
+      });
+
+      let result = previousResult;
+
+      this.subscriptionQueue.forEach(([updateQuery, data]) => {
+        result = updateQuery(result, {subscriptionData: {data}});
+      });
+
+      if (result !== previousResult) {
+        this.client.writeQuery({
+          query: this.resolvedDocument,
+          variables,
+          data: result,
+        });
+      }
+      this.subscriptionQueue = [];
+    }, 1000);
+
+    subscribeToMoreThrottled = ({document, variables, updateQuery}) => {
 
       // We need to add the typenames and resolve fragments.
-      const rootQuery = addTypenameToDocument(this.resolvedDocument);
       const query = addTypenameToDocument(this.graphqlRegistry.resolveFragments(document));
-      let batched = [];
-
-      // Process data in a batched fashion.
-      const processData = () => {
-        const variables = typeof this.wrappedOptions === 'function'
-          ? this.wrappedOptions(this.props).variables
-          : this.wrappedOptions.variables;
-
-        const previousResult = this.client.readQuery({
-          query: rootQuery,
-          variables,
-        });
-
-        let result = previousResult;
-
-        batched.forEach((data) => {
-          result = updateQuery(result, {subscriptionData: {data}});
-        });
-
-        if (result !== previousResult) {
-          this.client.writeQuery({
-            query: rootQuery,
-            variables,
-            data: result,
-          });
-        }
-        batched = [];
-      };
-
-      // throttle to handle high loads of traffic.
-      const processDataThrottled = throttle(processData, wait);
-
       const handler = (error, data) => {
         if (error) {
 
@@ -126,8 +129,10 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
           return;
         }
         if (data) {
-          batched.push(data);
-          processDataThrottled();
+          this.subscriptionQueue.push([updateQuery, data]);
+
+          // Triggers the throttled subscription queue processor.
+          this.processSubscriptionQueue();
         }
       };
 

From 64276cd157ef7e2ccbc4307833592b2af6529c12 Mon Sep 17 00:00:00 2001
From: Kim Gardner <kgardnr@gmail.com>
Date: Thu, 30 Nov 2017 23:20:01 +0000
Subject: [PATCH 10/36] Remove Dashboard

---
 locales/da.yml    | 11 -----------
 locales/en.yml    | 11 -----------
 locales/es.yml    | 11 -----------
 locales/fr.yml    | 11 -----------
 locales/pt_BR.yml | 11 -----------
 5 files changed, 55 deletions(-)

diff --git a/locales/da.yml b/locales/da.yml
index 48b5ab362..0a5152cd9 100644
--- a/locales/da.yml
+++ b/locales/da.yml
@@ -98,7 +98,6 @@ da:
     copy_and_paste: "Kopier og indsæt kode nedenfor i dit CMS system for at indlejre din kommentarboks i dine artiker."
     custom_css_url: "Brugerdefineret CSS URL"
     custom_css_url_desc: "URL til et CSS stylesheet der tilsidesætter den alimdelige strøms stilart. Kan være internt eller externt"
-    dashboard: "Instrumentbræt"
     days: "Dage"
     description: "Som administrator kan du tilpasse indstillingerne til kommentarstrømmen for denne historie:"
     domain_list_text: "Indtast de domæner du gerne vil tillade til Talk. f.eks. Dit lokale udviklings miljø (fx. localhost:3000 staging.domain.com domain.com)."
@@ -153,16 +152,6 @@ da:
     username: "Brugernavn"
     write_your_username: "Rediger dit brugernavn"
     your_username: "Dit brugernavn vises på hver kommentar du sender."
-  dashboard:
-    auto_update: "Data opdateres automatisk hvert femte minut, eller når du genindlæser."
-    comment_count: "kommentarer"
-    flags: "Flags"
-    most_flags: "Historier med de fleste flags"
-    most_conversations: "Historier med de fleste samtaler"
-    next_update: "{0} minutter indtil næste opdatering."
-    no_activity: "Der har ikke været nogen kommentarer i løbet af de sidste fem minutter."
-    no_flags: "Der har ikke været nogle flag i de sidste 5 minutter! Hurra!"
-    no_likes: "Der har ikke været nogen der syntes godt om noget i de sidste 5 minutter. Helt stille"
   done: "Færdig"
   edit_comment:
     body_input_label: "Rediger denne kommentar"
diff --git a/locales/en.yml b/locales/en.yml
index 02bdea30b..f1d566475 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -100,7 +100,6 @@ en:
     copy_and_paste: "Copy and paste code below into your CMS to embed your comment box in your articles"
     custom_css_url: "Custom CSS URL"
     custom_css_url_desc: "URL of a CSS stylesheet that will override default Embed Stream styles. Can be internal or external."
-    dashboard: Dashboard
     days: Days
     description: "As an admin, you can customize the settings for the comment stream for this story:"
     domain_list_text: "Enter the domains you would like to permit for Talk e.g. your local staging and production environments (ex. localhost:3000 staging.domain.com domain.com)."
@@ -155,16 +154,6 @@ en:
     username: Username
     write_your_username: "Edit your username"
     your_username: "Your username appears on every comment you post."
-  dashboard:
-    auto_update: "Data automatically updates every five minutes or when you Reload."
-    comment_count: comments
-    flags: Flags
-    most_flags: "Stories with the most flags"
-    most_conversations: "Stories with the most conversations"
-    next_update: "{0} minutes until next update."
-    no_activity: "There haven't been any comments anywhere in the last five minutes."
-    no_flags: "There have been no flags in the last 5 minutes! Hooray!"
-    no_likes: "There have been no likes in the last 5 minutes. All quiet."
   done: Done
   edit_comment:
     body_input_label: "Edit this comment"
diff --git a/locales/es.yml b/locales/es.yml
index 0282b6431..9441253c7 100644
--- a/locales/es.yml
+++ b/locales/es.yml
@@ -98,7 +98,6 @@ es:
     copy_and_paste: "Copiar y pegar el código de más abajo en tu CMS para colocar la caja de comentarios en tus artículos"
     custom_css_url: "URL CSS a medida"
     custom_css_url_desc: "URL de una hoja de estilo que va a sobrescribir los estilos por defecto del hilo de comentarios. Puede ser interna o externa."
-    dashboard: Panel
     days: Días
     description: "Como Administrador/a puedes modificar la configuración de los comentarios en este artículo"
     domain_list_text: "Agrega dominios permitidos a Talk, por ejemplo tu localhost, staging y ambientes de producción (ej. localhost:3000, staging.domain.com, domain.com)."
@@ -153,16 +152,6 @@ es:
     username: "Nombre"
     write_your_username: "Edita tu nombre"
     your_username: "Tu nombre aparece en cada comentario que publiques."
-  dashboard:
-    auto_update: "Los datos se actualizan automáticamente cada cinco minutos o cuando refresca el navegador."
-    comment_count: "comentarios"
-    flags: "Reportes"
-    most_flags: "Artículos con la mayor cantidad de reportes"
-    most_conversations: "Artículos con las mayores conversaciones"
-    next_update: "{0} minutos hasta la próxima actualización."
-    no_activity: "¡No han habido comentarios en ningún lado en los últimos 5 minutos."
-    no_flags: "¡No ha habido ningún reporte en los últimos 5 minutos! Bravo!"
-    no_likes: "¡No ha habido ningún 'me gusta' en los últimos 5 minutos. Todo tranquilo."
   done: "Hecho"
   edit_comment:
     body_input_label: "Editar este comentario"
diff --git a/locales/fr.yml b/locales/fr.yml
index 5c5a45aab..31ad3ca91 100644
--- a/locales/fr.yml
+++ b/locales/fr.yml
@@ -79,7 +79,6 @@ fr:
     copy_and_paste: "Copiez et collez le code ci-dessous dans votre CMS pour intégrer votre boîte de commentaires dans vos articles."
     custom_css_url: "URL CSS personnalisée"
     custom_css_url_desc: "URL d'une feuille de style CSS qui remplacera les styles par défaut d'intégration des commentaires. Peut être interne ou externe."
-    dashboard: Tableau de bord
     days: Journées
     description: "En tant qu'administrateur, vous pouvez personnaliser les paramètres du fil de commentaires pour cet élément."
     domain_list_text: "Entrez les domaines que vous souhaitez autoriser pour Talk, par exemple vos environnements locaux de production et de production (ex : localhost: 3000 staging.domain.com domain.com)."
@@ -121,16 +120,6 @@ fr:
     weeks: Semaines
     wordlist: "Mots interdits"
   continue: Continuer
-  dashboard:
-    auto_update: "Les données sont automatiquement mises à jour toutes les cinq minutes ou lorsque vous rechargez."
-    comment_count: commentaires
-    flags: signalements
-    most_flags: "Articles avec le plus de signalements"
-    most_conversations: "Articles avec le plus de conversations"
-    next_update: "{0} minutes jusqu'à la prochaine mise à jour."
-    no_activity: "Il n'y a eu aucun commentaire nulle part dans les cinq dernières minutes."
-    no_flags: "Il n'y a pas eu aucun signalement au cours des 5 dernières minutes! Hooray !"
-    no_likes: "Il n'y a pas eu de \"J'aime\" au cours des 5 dernières minutes. Tout est calme."
   done: Terminé
   edit_comment:
     body_input_label: "Modifier ce commentaire"
diff --git a/locales/pt_BR.yml b/locales/pt_BR.yml
index ae8e1310c..bdfe72d5a 100644
--- a/locales/pt_BR.yml
+++ b/locales/pt_BR.yml
@@ -98,7 +98,6 @@ pt_BR:
     copy_and_paste: "Copie e cole o código abaixo em seu CMS para incorporar sua caixa de comentários em seus artigos."
     custom_css_url: "URL para CSS customizado"
     custom_css_url_desc: "URL de uma folha de estilo CSS para substituir os estilos padrão dos comentários embutidos. Pode ser interno ou externo."
-    dashboard: Painel de controle
     days: Dias
     description: "Como administrador, você pode personalizar as configurações da lista de comentários para esta história:"
     domain_list_text: "Insira os domínios que você gostaria de permitir para o Talk, como seus ambientes de desenvolvimento, teste ou produção (ej. localhost:3000 staging.domain.com domain.com)."
@@ -153,16 +152,6 @@ pt_BR:
     username: Nome de usuário
     write_your_username: "Edite seu nome de usuário"
     your_username: "Nosso nome de usuário aparece em todos os comentários que você publica."
-  dashboard:
-    auto_update: "Atualizado autimaticamente a cada minutos ou após recarregamento."
-    comment_count: comentários
-    flags: Marcações
-    most_flags: "Conversas com mais comentários marcados"
-    most_conversations: "Conversas com mais comentários"
-    next_update: "{0} minutos até a próxima atualização."
-    no_activity: "Não houve nenhum comentário nos últimos cinco minutos."
-    no_flags: "Não houve nenhum comentário marcado em nenhum lugar nos últimos 5 minutos. Hip Hip Uha!"
-    no_likes: "Não houve reações nos últimos 5 minutos."
   done: Feito
   edit_comment:
     body_input_label: "Edite este comentário"

From 9c0e6ccb3683cc6110a1fd429d8b75762f9de6be Mon Sep 17 00:00:00 2001
From: Kim Gardner <kgardnr@gmail.com>
Date: Thu, 30 Nov 2017 23:21:01 +0000
Subject: [PATCH 11/36] Remove Dashboard

---
 client/coral-admin/src/AppRouter.js           |   2 -
 client/coral-admin/src/components/Drawer.js   |  10 +-
 .../coral-admin/src/components/ui/Header.js   |  11 +-
 client/coral-admin/src/reducers/dashboard.js  |  15 ---
 client/coral-admin/src/reducers/index.js      |   2 -
 .../Dashboard/components/ActivityWidget.js    |  47 --------
 .../Dashboard/components/CountdownTimer.js    |  93 ---------------
 .../routes/Dashboard/components/Dashboard.css |  40 -------
 .../routes/Dashboard/components/Dashboard.js  |  15 ---
 .../routes/Dashboard/components/FlagWidget.js |  54 ---------
 .../routes/Dashboard/components/LikeWidget.js |  49 --------
 .../components/MostLikedCommentsWidget.js     |  38 ------
 .../routes/Dashboard/components/Widget.css    | 110 ------------------
 .../routes/Dashboard/containers/Dashboard.js  |  65 -----------
 .../coral-admin/src/routes/Dashboard/index.js |   1 -
 15 files changed, 4 insertions(+), 548 deletions(-)
 delete mode 100644 client/coral-admin/src/reducers/dashboard.js
 delete mode 100644 client/coral-admin/src/routes/Dashboard/components/ActivityWidget.js
 delete mode 100644 client/coral-admin/src/routes/Dashboard/components/CountdownTimer.js
 delete mode 100644 client/coral-admin/src/routes/Dashboard/components/Dashboard.css
 delete mode 100644 client/coral-admin/src/routes/Dashboard/components/Dashboard.js
 delete mode 100644 client/coral-admin/src/routes/Dashboard/components/FlagWidget.js
 delete mode 100644 client/coral-admin/src/routes/Dashboard/components/LikeWidget.js
 delete mode 100644 client/coral-admin/src/routes/Dashboard/components/MostLikedCommentsWidget.js
 delete mode 100644 client/coral-admin/src/routes/Dashboard/components/Widget.css
 delete mode 100644 client/coral-admin/src/routes/Dashboard/containers/Dashboard.js
 delete mode 100644 client/coral-admin/src/routes/Dashboard/index.js

diff --git a/client/coral-admin/src/AppRouter.js b/client/coral-admin/src/AppRouter.js
index d8e1b5377..362143d38 100644
--- a/client/coral-admin/src/AppRouter.js
+++ b/client/coral-admin/src/AppRouter.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import {Router, Route, IndexRedirect, IndexRoute} from 'react-router';
 
 import Configure from 'routes/Configure';
-import Dashboard from 'routes/Dashboard';
 import Install from 'routes/Install';
 import Stories from 'routes/Stories';
 import Community from 'routes/Community/containers/Community';
@@ -18,7 +17,6 @@ const routes = (
       <IndexRedirect to='/admin/moderate' />
       <Route path='configure' component={Configure} />
       <Route path='stories' component={Stories} />
-      <Route path='dashboard' component={Dashboard} />
 
       {/* Community Routes */}
 
diff --git a/client/coral-admin/src/components/Drawer.js b/client/coral-admin/src/components/Drawer.js
index 70da8ad5e..29ee8d17e 100644
--- a/client/coral-admin/src/components/Drawer.js
+++ b/client/coral-admin/src/components/Drawer.js
@@ -12,20 +12,14 @@ const CoralDrawer = ({handleLogout, auth = {}}) => (
     { auth && auth.user && can(auth.user, 'ACCESS_ADMIN') ?
       <div>
         <Navigation className={styles.nav}>
-          <IndexLink
-            className={cn('talk-admin-nav-dashboard', styles.navLink)}
-            to="/admin/dashboard"
-            activeClassName={styles.active}>
-            {t('configure.dashboard')}
-          </IndexLink>
           {
             can(auth.user, 'MODERATE_COMMENTS') && (
-              <Link
+              <IndexLink
                 className={cn('talk-admin-nav-moderate', styles.navLink)}   
                 to="/admin/moderate"
                 activeClassName={styles.active}>
                 {t('configure.moderate')}
-              </Link>
+              </IndexLink>
             )
           }
           <Link
diff --git a/client/coral-admin/src/components/ui/Header.js b/client/coral-admin/src/components/ui/Header.js
index e199d5ded..4e7826ee6 100644
--- a/client/coral-admin/src/components/ui/Header.js
+++ b/client/coral-admin/src/components/ui/Header.js
@@ -23,23 +23,16 @@ const CoralHeader = ({
           {
             auth && auth.user && can(auth.user, 'ACCESS_ADMIN') ?
               <Navigation className={styles.nav}>
-                <IndexLink
-                  id='dashboardNav'
-                  className={cn('talk-admin-nav-dashboard', styles.navLink)}
-                  to="/admin/dashboard"
-                  activeClassName={styles.active}>
-                  {t('configure.dashboard')}
-                </IndexLink>
                 {
                   can(auth.user, 'MODERATE_COMMENTS') && (
-                    <Link
+                    <IndexLink
                       id='moderateNav'
                       className={cn('talk-admin-nav-moderate', styles.navLink)}
                       to="/admin/moderate"
                       activeClassName={styles.active}>
                       {t('configure.moderate')}
                       {(root.premodCount !== 0 || root.reportedCount !== 0) && <Indicator />}
-                    </Link>
+                    </IndexLink>
                   )
                 }
                 <Link
diff --git a/client/coral-admin/src/reducers/dashboard.js b/client/coral-admin/src/reducers/dashboard.js
deleted file mode 100644
index 3b3414d3a..000000000
--- a/client/coral-admin/src/reducers/dashboard.js
+++ /dev/null
@@ -1,15 +0,0 @@
-// this is initialized here because
-// currently you have to reload the dashboard to get new stats
-// cleaner updates are planned in the future.
-const DASHBOARD_WINDOW_MINUTES = 5;
-let then = new Date();
-then.setMinutes(then.getMinutes() - DASHBOARD_WINDOW_MINUTES);
-
-const initialState = {
-  windowStart: then.toISOString(),
-  windowEnd: new Date().toISOString(),
-};
-
-export default function dashboard (state = initialState, _action) {
-  return state;
-}
diff --git a/client/coral-admin/src/reducers/index.js b/client/coral-admin/src/reducers/index.js
index f7bbf3a3b..450a914c3 100644
--- a/client/coral-admin/src/reducers/index.js
+++ b/client/coral-admin/src/reducers/index.js
@@ -1,6 +1,5 @@
 import auth from './auth';
 import stories from './stories';
-import dashboard from './dashboard';
 import configure from './configure';
 import community from './community';
 import moderation from './moderation';
@@ -13,7 +12,6 @@ import userDetail from './userDetail';
 export default {
   auth,
   banUserDialog,
-  dashboard,
   configure,
   suspendUserDialog,
   userDetail,
diff --git a/client/coral-admin/src/routes/Dashboard/components/ActivityWidget.js b/client/coral-admin/src/routes/Dashboard/components/ActivityWidget.js
deleted file mode 100644
index 3f8af141b..000000000
--- a/client/coral-admin/src/routes/Dashboard/components/ActivityWidget.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {Link} from 'react-router';
-import styles from './Widget.css';
-import t from 'coral-framework/services/i18n';
-
-const ActivityWidget = ({assets}) => {
-  return (
-    <div className={styles.widget}>
-      <h2 className={styles.heading}>{t('dashboard.most_conversations')}</h2>
-      <div className={styles.widgetHead}>
-        <p>{t('streams.article')}</p>
-        <p>{t('dashboard.comment_count')}</p>
-      </div>
-      <div className={styles.widgetTable}>
-        {
-          assets.length
-            ? assets.map((asset) => {
-              return (
-                <div className={styles.rowLinkify} key={asset.id}>
-                  <Link className={styles.linkToModerate} to={`/admin/moderate/${asset.id}`}>Moderate</Link>
-                  <p className={styles.widgetCount}>{asset.commentCount}</p>
-                  <a className={styles.linkToAsset} href={`${asset.url}`} target="_blank">
-                    <p className={styles.assetTitle}>{asset.title}</p>
-                  </a>
-                  <p className={styles.lede}>{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}</p>
-                </div>
-              );
-            })
-            : <div className={styles.rowLinkify}>{t('dashboard.no_activity')}</div>
-        }
-      </div>
-    </div>
-  );
-};
-
-ActivityWidget.propTypes = {
-  assets: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    url: PropTypes.string,
-    commentCount: PropTypes.number,
-    author: PropTypes.string,
-    created_at: PropTypes.string
-  })).isRequired
-};
-
-export default ActivityWidget;
diff --git a/client/coral-admin/src/routes/Dashboard/components/CountdownTimer.js b/client/coral-admin/src/routes/Dashboard/components/CountdownTimer.js
deleted file mode 100644
index a2e6ea9f1..000000000
--- a/client/coral-admin/src/routes/Dashboard/components/CountdownTimer.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styles from './Dashboard.css';
-import {Icon} from 'coral-ui';
-
-import t from 'coral-framework/services/i18n';
-const refreshIntervalSeconds = 60 * 5;
-
-// TODO: refactor out storage code into redux.
-
-class CountdownTimer extends React.Component {
-
-  static contextTypes = {
-    storage: PropTypes.object,
-  };
-
-  static propTypes = {
-    handleTimeout: PropTypes.func.isRequired
-  }
-
-  constructor (props, context) {
-    super(props, context);
-    const {storage} = context;
-    try {
-      if (storage && storage.getItem('coral:dashboardNote') === null) {
-        storage.setItem('coral:dashboardNote', 'show');
-      }
-    } catch (e) {
-
-      // above will fail in Private Mode in some browsers.
-    }
-
-    this.state = {
-      secondsUntilRefresh: refreshIntervalSeconds,
-      dashboardNote: (storage && storage.getItem('coral:dashboardNote')) || 'show'
-    };
-  }
-
-  componentWillMount () {
-    this.interval = setInterval(() => { // the countdown timer
-      let nextCount = this.state.secondsUntilRefresh - 1;
-      if (nextCount < 0) {
-        nextCount = refreshIntervalSeconds;
-        return this.props.handleTimeout();
-      }
-      this.setState({secondsUntilRefresh: nextCount});
-    }, 1000);
-  }
-
-  componentWillUnmount () {
-    window.clearInterval(this.interval);
-  }
-
-  formatTime = () => {
-    const minutes = Math.floor(this.state.secondsUntilRefresh / 60);
-    let seconds = (this.state.secondsUntilRefresh % 60).toString();
-    if (seconds.length < 2) {
-      seconds = `0${seconds}`;
-    }
-
-    return `${minutes}:${seconds}`;
-  }
-
-  dismissNote = () => {
-    const {storage} = this.context;
-    try {
-      if (storage) {
-        storage.setItem('coral:dashboardNote', 'hide');
-      }
-    } catch (e) {
-
-      // when setItem fails in Safari Private mode
-      this.setState({dashboardNote: 'hide'});
-    }
-  }
-
-  render () {
-    const {storage} = this.context;
-    const hideReloadNote = (storage && storage.getItem('coral:dashboardNote') === 'hide') ||
-      this.state.dashboardNote === 'hide'; // for Safari Incognito
-    return (
-      <p
-        style={{display: hideReloadNote ? 'none' : 'block'}}
-        className={styles.autoUpdate}
-        onClick={this.dismissNote}>
-        <b>×</b>
-        <Icon name='timer' /> <strong>{t('dashboard.next_update', this.formatTime())}</strong> {t('dashboard.auto_update')}
-      </p>
-    );
-  }
-}
-
-export default CountdownTimer;
diff --git a/client/coral-admin/src/routes/Dashboard/components/Dashboard.css b/client/coral-admin/src/routes/Dashboard/components/Dashboard.css
deleted file mode 100644
index aee7e702b..000000000
--- a/client/coral-admin/src/routes/Dashboard/components/Dashboard.css
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * @TODO: deprecated as this file contains styles from multiple components. Please refactor.
- */
-
-.Dashboard {
-  display: flex;
-  max-width: 1280px;
-  margin: 0 auto;
-}
-
-.heading {
-  margin: 0;
-  font-size: 1.5rem;
-  font-weight: bold;
-}
-
-.autoUpdate {
-  background-color: #d5d5d5;
-  padding: 3px 10px 10px 10px;
-  margin-bottom: 0;
-
-  i {
-    position: relative;
-    top: 7px;
-  }
-
-  b {
-    float: right;
-    border-radius: 20px;
-    cursor: pointer;
-    background-color: #c0c0c0;
-    width: 30px;
-    height: 30px;
-    text-align: center;
-    top: 4px;
-    position: relative;
-    line-height: 1.7em;
-    font-size: 1.3em;
-  }
-}
diff --git a/client/coral-admin/src/routes/Dashboard/components/Dashboard.js b/client/coral-admin/src/routes/Dashboard/components/Dashboard.js
deleted file mode 100644
index ba224a3b9..000000000
--- a/client/coral-admin/src/routes/Dashboard/components/Dashboard.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import FlagWidget from './FlagWidget';
-import ActivityWidget from './ActivityWidget';
-import CountdownTimer from './CountdownTimer';
-import styles from './Dashboard.css';
-
-export default ({root: {assetsByActivity, assetsByFlag}, reloadData}) => (
-  <div>
-    <CountdownTimer handleTimeout={reloadData} />
-    <div className={styles.Dashboard}>
-      <FlagWidget assets={assetsByFlag} />
-      <ActivityWidget assets={assetsByActivity} />
-    </div>
-  </div>
-);
diff --git a/client/coral-admin/src/routes/Dashboard/components/FlagWidget.js b/client/coral-admin/src/routes/Dashboard/components/FlagWidget.js
deleted file mode 100644
index 2f3548cf1..000000000
--- a/client/coral-admin/src/routes/Dashboard/components/FlagWidget.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {Link} from 'react-router';
-import styles from './Widget.css';
-
-import t from 'coral-framework/services/i18n';
-
-const FlagWidget = ({assets}) => {
-
-  return (
-    <div className={styles.widget}>
-      <h2 className={styles.heading}>{t('dashboard.most_flags')}</h2>
-      <div className={styles.widgetHead}>
-        <p>{t('streams.article')}</p>
-        <p>{t('dashboard.flags')}</p>
-      </div>
-      <div className={styles.widgetTable}>
-        {
-          assets.length
-            ? assets.map((asset) => {
-              let flagSummary = null;
-              if (asset.action_summaries) {
-                flagSummary = asset.action_summaries.find((s) => s.__typename === 'FlagAssetActionSummary');
-              }
-
-              return (
-                <div className={styles.rowLinkify} key={asset.id}>
-                  <Link className={styles.linkToModerate} to={`/admin/moderate/reported/${asset.id}`}>Moderate</Link>
-                  <p className={styles.widgetCount}>{flagSummary ? flagSummary.actionCount : 0}</p>
-                  <a className={styles.linkToAsset} href={`${asset.url}`} target="_blank">
-                    <p className={styles.assetTitle}>{asset.title}</p>
-                  </a>
-                  <p className={styles.lede}>{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}</p>
-                </div>
-              );
-            })
-            : <div className={styles.rowLinkify}>{t('dashboard.no_flags')}</div>
-        }
-      </div>
-    </div>
-  );
-};
-
-FlagWidget.propTypes = {
-  assets: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    url: PropTypes.string,
-    action_summaries: PropTypes.array,
-    author: PropTypes.string,
-    created_at: PropTypes.string
-  })).isRequired
-};
-
-export default FlagWidget;
diff --git a/client/coral-admin/src/routes/Dashboard/components/LikeWidget.js b/client/coral-admin/src/routes/Dashboard/components/LikeWidget.js
deleted file mode 100644
index 7525f7223..000000000
--- a/client/coral-admin/src/routes/Dashboard/components/LikeWidget.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {Link} from 'react-router';
-import styles from './Widget.css';
-import t from 'coral-framework/services/i18n';
-
-const LikeWidget = ({assets}) => {
-
-  return (
-    <div className={styles.widget}>
-      <h2 className={styles.heading}>Articles with the most likes</h2>
-      <div className={styles.widgetHead}>
-        <p>{t('streams.article')}</p>
-        <p>{t('modqueue.likes')}</p>
-      </div>
-      <div className={styles.widgetTable}>
-        {
-          assets.length
-            ? assets.map((asset) => {
-              const likeSummary = asset.action_summaries.find((s) => s.type === 'LikeAssetActionSummary');
-              return (
-                <div className={styles.rowLinkify} key={asset.id}>
-                  <Link className={styles.linkToModerate} to={`/admin/moderate/${asset.id}`}>Moderate</Link>
-                  <p className={styles.widgetCount}>{likeSummary ? likeSummary.actionCount : 0}</p>
-                  <a className={styles.linkToAsset} href={`${asset.url}`} target="_blank">
-                    <p className={styles.assetTitle}>{asset.title}</p>
-                  </a>
-                  <p className={styles.lede}>{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}</p>
-                </div>
-              );
-            })
-            : <div className={styles.rowLinkify}>{t('dashboard.no_likes')}</div>
-        }
-      </div>
-    </div>
-  );
-};
-
-LikeWidget.propTypes = {
-  assets: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    url: PropTypes.string,
-    action_summaries: PropTypes.array,
-    author: PropTypes.string,
-    created_at: PropTypes.string
-  })).isRequired
-};
-
-export default LikeWidget;
diff --git a/client/coral-admin/src/routes/Dashboard/components/MostLikedCommentsWidget.js b/client/coral-admin/src/routes/Dashboard/components/MostLikedCommentsWidget.js
deleted file mode 100644
index 6bbb67c50..000000000
--- a/client/coral-admin/src/routes/Dashboard/components/MostLikedCommentsWidget.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-
-import ModerationQueue from 'coral-admin/src/containers/ModerationQueue/ModerationQueue';
-import styles from './Widget.css';
-import BanUserDialog from 'coral-admin/src/components/BanUserDialog';
-import t from 'coral-framework/services/i18n';
-
-const MostLikedCommentsWidget = (props) => {
-  const {
-    comments,
-    moderation,
-    settings,
-    handleBanUser,
-    showBanUserDialog,
-    hideBanUserDialog,
-    acceptComment,
-    rejectComment
-  } = props;
-
-  return (
-    <div className={styles.widget}>
-      <h2 className={styles.heading}>{t('most_liked_comments')}</h2>
-      <ModerationQueue
-        comments={comments}
-        suspectWords={settings.wordlist.suspect}
-        showBanUserDialog={showBanUserDialog}
-        acceptComment={acceptComment}
-        rejectComment={rejectComment} />
-      <BanUserDialog
-        open={moderation.banDialog}
-        user={moderation.user}
-        handleClose={hideBanUserDialog}
-        handleBanUser={handleBanUser} />
-    </div>
-  );
-};
-
-export default MostLikedCommentsWidget;
diff --git a/client/coral-admin/src/routes/Dashboard/components/Widget.css b/client/coral-admin/src/routes/Dashboard/components/Widget.css
deleted file mode 100644
index e94d2313f..000000000
--- a/client/coral-admin/src/routes/Dashboard/components/Widget.css
+++ /dev/null
@@ -1,110 +0,0 @@
-/**
- * @TODO: deprecated as this file contains styles from multiple components. Please refactor.
- */
-
-:root {
-  --row-height: 60px;
-}
-
-.widget {
-  margin: 10px 5px 5px 5px;
-  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
-  flex: 1;
-  background-color: white;
-  box-sizing: border-box;
-}
-
-.widget * {
-  box-sizing: border-box;
-}
-
-.heading {
-  margin: 0;
-  padding-left: 10px;
-  font-size: 1.3rem;
-  font-weight: 600;
-  color: #2c2c2c;
-}
-
-.widgetTable {
-  height: calc(var(--row-height) * 10);
-}
-
-.widgetTable + div:after {
-  content: '';
-  clear: both;
-  display: block;
-}
-
-.widgetHead p {
-  color: #2c2c2c;
-  font-weight: 500;
-  padding: 10px;
-  text-align: left;
-  text-transform: capitalize;
-  display: inline-block;
-  box-sizing: border-box;
-  margin-bottom: 0;
-}
-
-.widgetHead p:last-child {
-  float: right;
-  margin-right: 100px;
-}
-
-.rowLinkify {
-  border-bottom: 1px solid lightgrey;
-  color: #555;
-  height: var(--row-height);
-  padding: 10px;
-  transition: background-color 200ms;
-}
-
-.rowLinkify:last-child {
-  border-bottom: none;
-}
-
-.rowLinkify:hover {
-  background-color: #f8f8f8;
-  pointer: default;
-}
-
-.linkToAsset {
-  display: inline-block;
-  text-decoration: none;
-}
-
-.linkToModerate {
-  background-color: #BDBDBD;
-  padding: 10px 14px;
-  text-decoration: none;
-  color: black;
-  float: right;
-  margin-left: 15px;
-  transition: background-color 200ms;
-}
-
-.linkToModerate:hover {
-  background-color: #9E9E9E;
-}
-
-.lede {
-  font-size: 0.9em;
-  color: #aaa;
-}
-
-.assetTitle {
-  color: #555;
-  text-decoration: none;
-  font-size: 1.2em;
-  font-weight: 500;
-  margin: 0;
-}
-
-.widgetCount {
-  color: #555;
-  font-size: 1.3em;
-  font-weight: 400;
-  float: right;
-  margin-top: 7px;
-}
diff --git a/client/coral-admin/src/routes/Dashboard/containers/Dashboard.js b/client/coral-admin/src/routes/Dashboard/containers/Dashboard.js
deleted file mode 100644
index e2e9ef28c..000000000
--- a/client/coral-admin/src/routes/Dashboard/containers/Dashboard.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import React from 'react';
-import {connect} from 'react-redux';
-import Dashboard from '../components/Dashboard';
-import {compose,  gql} from 'react-apollo';
-import withQuery from 'coral-framework/hocs/withQuery';
-
-import {Spinner} from 'coral-ui';
-
-class DashboardContainer extends React.Component {
-
-  reloadData = () => {
-    this.props.data.refetch();
-  }
-
-  render () {
-    if (this.props.data.loading) {
-      return <Spinner />;
-    }
-    return <Dashboard {...this.props} reloadData={this.reloadData} />;
-  }
-}
-
-export const witDashboardQuery = withQuery(gql`
-  query CoralAdmin_Dashboard($from: Date!, $to: Date!) {
-    assetsByFlag: assetMetrics(from: $from, to: $to, sortBy: FLAG) {
-      ...CoralAdmin_Metrics
-    }
-    assetsByActivity: assetMetrics(from: $from, to: $to, sortBy: ACTIVITY) {
-      ...CoralAdmin_Metrics
-    }
-  }
-  fragment CoralAdmin_Metrics on Asset {
-    id
-    title
-    url
-    author
-    created_at
-    commentCount
-    action_summaries {
-      actionCount
-      actionableItemCount
-    }
-  }
-`, {
-    options: ({windowStart, windowEnd}) => {
-      return {
-        variables: {
-          from: windowStart,
-          to: windowEnd,
-        }
-      };
-    }
-  });
-
-const mapStateToProps = (state) => {
-  return {
-    windowStart: state.dashboard.windowStart,
-    windowEnd: state.dashboard.windowEnd,
-  };
-};
-
-export default compose(
-  connect(mapStateToProps),
-  witDashboardQuery,
-)(DashboardContainer);
diff --git a/client/coral-admin/src/routes/Dashboard/index.js b/client/coral-admin/src/routes/Dashboard/index.js
deleted file mode 100644
index 5bbb476e2..000000000
--- a/client/coral-admin/src/routes/Dashboard/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export {default} from './containers/Dashboard.js';

From ef200a85cbec4f4a8a04619409bbd1aae727f281 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Thu, 30 Nov 2017 17:16:32 -0700
Subject: [PATCH 12/36] removed backend for metrics

---
 graph/loaders/assets.js              |   6 -
 graph/loaders/index.js               |   2 -
 graph/loaders/metrics.js             | 257 ---------------------------
 graph/resolvers/root_query.js        |  22 ---
 graph/resolvers/user.js              |   3 +-
 graph/typeDefs.graphql               |  21 ---
 perms/constants.js                   |   1 -
 perms/queryReducer.js                |   2 -
 test/server/graph/loaders/metrics.js | 133 --------------
 9 files changed, 1 insertion(+), 446 deletions(-)
 delete mode 100644 graph/loaders/metrics.js
 delete mode 100644 test/server/graph/loaders/metrics.js

diff --git a/graph/loaders/assets.js b/graph/loaders/assets.js
index b2e315ec5..832b7b473 100644
--- a/graph/loaders/assets.js
+++ b/graph/loaders/assets.js
@@ -79,11 +79,6 @@ const findOrCreateAssetByURL = async (context, asset_url) => {
   return asset;
 };
 
-const getAssetsForMetrics = async ({loaders: {Comments}}) => {
-  return Comments.getByQuery({action_type: 'FLAG'})
-    .then((connection) => connection.nodes);
-};
-
 const findByUrl = async (context, asset_url) => {
 
   // Verify that the asset_url is parsable.
@@ -111,7 +106,6 @@ module.exports = (context) => ({
     findByUrl: (url) => findByUrl(context, url),
     getByQuery: (query) => getAssetsByQuery(context, query),
     getByID: new DataLoader((ids) => genAssetsByID(context, ids)),
-    getForMetrics: () => getAssetsForMetrics(context),
     getAll: new util.SingletonResolver(() => AssetModel.find({}))
   }
 });
diff --git a/graph/loaders/index.js b/graph/loaders/index.js
index 8bc170c6d..0ef09940f 100644
--- a/graph/loaders/index.js
+++ b/graph/loaders/index.js
@@ -4,7 +4,6 @@ const debug = require('debug')('talk:graph:loaders');
 const Actions = require('./actions');
 const Assets = require('./assets');
 const Comments = require('./comments');
-const Metrics = require('./metrics');
 const Settings = require('./settings');
 const Tags = require('./tags');
 const Users = require('./users');
@@ -17,7 +16,6 @@ let loaders = [
   Actions,
   Assets,
   Comments,
-  Metrics,
   Settings,
   Tags,
   Users,
diff --git a/graph/loaders/metrics.js b/graph/loaders/metrics.js
deleted file mode 100644
index 28efe2963..000000000
--- a/graph/loaders/metrics.js
+++ /dev/null
@@ -1,257 +0,0 @@
-const _ = require('lodash');
-const DataLoader = require('dataloader');
-const {objectCacheKeyFn} = require('./util');
-
-const ActionModel = require('../../models/action');
-const CommentModel = require('../../models/comment');
-
-/**
- * Returns the assets which have had comments made within the last time period.
- */
-const getAssetActivityMetrics = ({loaders: {Assets}}, {from, to, limit}) => {
-  let assetMetrics = [];
-
-  return CommentModel.aggregate([
-    {$match: {
-      parent_id: null,
-      created_at: {
-        $gt: from,
-        $lt: to
-      }
-    }},
-    {$group: {
-      _id: '$asset_id',
-      commentCount: {
-        $sum: 1
-      }
-    }},
-    {$project: {
-      _id: false,
-      asset_id: '$_id',
-      commentCount: '$commentCount'
-    }},
-    {$sort: {
-      commentCount: -1
-    }},
-    {$limit: limit}
-  ])
-    .then((results) => {
-      assetMetrics = results;
-
-      return Assets.getByID.loadMany(results.map((result) => result.asset_id));
-    })
-    .then((assets) => assets.map((asset, i) => {
-
-    // We're leveraging the fact that the comments returned by the aggregation
-    // query are in the request order that we just made, it's what the
-    // Assets.getByID loader does.
-      asset.commentCount = assetMetrics[i].commentCount;
-
-      return asset;
-    }));
-};
-
-/**
- * Returns a list of assets with action metadata included on the models.
- */
-const getAssetMetrics = async ({loaders: {Metrics, Assets, Comments}}, {from, to, sortBy, limit}) => {
-
-  // Get the recent actions.
-  let actionSummaries = await Metrics.getRecentActions.load({from, to});
-
-  let commentMetrics = actionSummaries.reduce((acc, {item_id, action_type, count}) => {
-    if (action_type !== sortBy) {
-      return acc;
-    }
-
-    if (!(item_id in acc)) {
-      acc[item_id] = [];
-    }
-
-    acc[item_id].push({action_type, count});
-
-    return acc;
-  }, {});
-
-  // Collect just the comment id's.
-  let commentIDs = Object.keys(commentMetrics);
-
-  // Find those comments.
-  let comments = await Comments.get.loadMany(commentIDs);
-
-  let commentResults = _.groupBy(comments, 'asset_id');
-
-  let assetMetrics = Object.keys(commentResults)
-    .map((asset_id) => {
-      let ids = commentResults[asset_id].map((comment) => comment.id);
-      let summaries = _.groupBy(_.flatten(ids.map((id) => commentMetrics[id])), 'action_type');
-
-      let action_summaries = Object.keys(summaries).map((action_type) => ({
-        action_type,
-        actionCount: summaries[action_type].reduce((acc, {count}) => acc + count, 0),
-        actionableItemCount: summaries[action_type].length
-      }));
-
-      return {action_summaries, id: asset_id};
-    })
-
-    .filter((asset) => {
-      let contextActionSummary = asset.action_summaries.find((({action_type}) => action_type === sortBy));
-      if (contextActionSummary === null || contextActionSummary.actionCount === 0) {
-        return false;
-      }
-
-      return true;
-    })
-
-    // Sort these metrics by the predefined sort order. This will ensure that
-    // if the action summary does not exist on the object, that it is less
-    // prefered over the one that does have it.
-    .sort((a, b) => {
-      let aActionSummary = a.action_summaries.find((({action_type}) => action_type === sortBy));
-      let bActionSummary = b.action_summaries.find((({action_type}) => action_type === sortBy));
-
-      // Both of them had an actionCount, hence we can determine that we could
-      // compare the actual values directly.
-      return bActionSummary.actionCount - aActionSummary.actionCount;
-    });
-
-  // Only keep the top `limit`.
-  assetMetrics = assetMetrics.slice(0, limit);
-
-  // Determine the assets that we need to return.
-  let assets = await Assets.getByID.loadMany(assetMetrics.map((asset) => asset.id));
-
-  // Join up the assets that are returned by their id.
-  let groupedAssets = _.groupBy(assets, 'id');
-
-  // Return from the sorted asset metrics and return their assetes.
-  return assetMetrics.map(({id, action_summaries}) => {
-    if (id in groupedAssets) {
-      let asset = groupedAssets[id][0];
-
-      // Add the action summaries to the asset.
-      asset.action_summaries = action_summaries;
-
-      return asset;
-    }
-
-    return null;
-  }).filter((asset) => asset != null);
-};
-
-/**
- * Returns a list of comments that are retrieved based on most activity within
- * the indicated time range.
- */
-const getCommentMetrics = async ({loaders: {Metrics, Comments}}, {from, to, sortBy, limit}) => {
-
-  let commentActionSummaries = {};
-
-  let actionSummaries = await Metrics.getRecentActions.load({from, to});
-
-  actionSummaries.sort((a, b) => {
-    let aActionSummary = a.action_type === sortBy ? a : null;
-    let bActionSummary = b.action_type === sortBy ? b : null;
-
-    // If either a or b don't have this action type, then one of them will
-    // automatically win.
-    if (aActionSummary == null || bActionSummary == null) {
-      if (bActionSummary != null) {
-        return 1;
-      }
-
-      if (aActionSummary != null) {
-        return -1;
-      }
-
-      return 0;
-    }
-
-    // Both of them had an actionCount, hence we can determine that we could
-    // compare the actual values directly.
-    return bActionSummary.count - aActionSummary.count;
-  });
-
-  commentActionSummaries = _.groupBy(actionSummaries, 'item_id');
-
-  // Grab the comment id's for comment where they have at least one of the
-  // actions being sorted by.
-  let commentIDs = Object.keys(commentActionSummaries).filter((item_id) => {
-    let contextActionSummary = commentActionSummaries[item_id].find(({action_type}) => action_type === sortBy);
-    if (contextActionSummary == null) {
-      return false;
-    }
-
-    return true;
-  });
-
-  // Only keep the top `limit`.
-  commentIDs = commentIDs.slice(0, limit);
-
-  // If there are no comment's to get, then just continue with an empty
-  // array.
-  if (commentIDs.length === 0) {
-    return [];
-  }
-
-  // Find those comments, this is the final stage, so let's get all the
-  // fields.
-  let comments = await Comments.get.loadMany(commentIDs);
-
-  return comments.map((comment) => {
-
-    // Add in the action summaries genrerated.
-    comment.action_summaries = commentActionSummaries[comment.id];
-
-    return comment;
-  });
-};
-
-const getRecentActions = (context, {from, to}) => {
-  return ActionModel.aggregate([
-
-    // Find all actions that were created in the time range.
-    {$match: {
-      item_type: 'COMMENTS',
-      created_at: {
-        $gt: from,
-        $lt: to
-      }
-    }},
-
-    // Count all those items.
-    {$group: {
-      _id: {
-        item_id: '$item_id',
-        action_type: '$action_type'
-      },
-      count: {
-        $sum: 1
-      }
-    }},
-
-    // Project the count to a better field.
-    {$project: {
-      item_id: '$_id.item_id',
-      action_type: '$_id.action_type',
-      count: '$count'
-    }}
-  ]);
-};
-
-module.exports = (context) => ({
-  Metrics: {
-    getRecentActions: new DataLoader(([{from, to}]) => getRecentActions(context, {from, to}).then((as) => [as]), {
-      batch: false,
-      cacheKeyFn: objectCacheKeyFn('from', 'to')
-    }),
-    Assets: {
-      get: ({from, to, sortBy, limit}) => getAssetMetrics(context, {from, to, sortBy, limit}),
-      getActivity: ({from, to, limit}) => getAssetActivityMetrics(context, {from, to, limit}),
-    },
-    Comments: {
-      get: ({from, to, sortBy, limit}) => getCommentMetrics(context, {from, to, sortBy, limit}),
-    }
-  }
-});
diff --git a/graph/resolvers/root_query.js b/graph/resolvers/root_query.js
index e4701c901..aa8b90f20 100644
--- a/graph/resolvers/root_query.js
+++ b/graph/resolvers/root_query.js
@@ -1,7 +1,6 @@
 const {
   SEARCH_ASSETS,
   SEARCH_OTHERS_COMMENTS,
-  SEARCH_COMMENT_METRICS,
   SEARCH_OTHER_USERS
 } = require('../../perms/constants');
 
@@ -58,27 +57,6 @@ const RootQuery = {
     return Users.getCountByQuery(query);
   },
 
-  assetMetrics(_, query, {user, loaders: {Metrics: {Assets}}}) {
-    if (user == null || !user.can(SEARCH_ASSETS)) {
-      return null;
-    }
-
-    const {sortBy} = query;
-    if (sortBy === 'ACTIVITY') {
-      return Assets.getActivity(query);
-    }
-
-    return Assets.get(query);
-  },
-
-  commentMetrics(_, query, {user, loaders: {Metrics: {Comments}}}) {
-    if (user == null || !user.can(SEARCH_COMMENT_METRICS)) {
-      return null;
-    }
-
-    return Comments.get(query);
-  },
-
   // This returns the current user, ensure that if we aren't logged in, we
   // return null.
   me(_, args, {user}) {
diff --git a/graph/resolvers/user.js b/graph/resolvers/user.js
index e5c5746ca..d95ae53f6 100644
--- a/graph/resolvers/user.js
+++ b/graph/resolvers/user.js
@@ -5,7 +5,6 @@ const {
   SEARCH_OTHER_USERS,
   SEARCH_OTHERS_COMMENTS,
   UPDATE_USER_ROLES,
-  SEARCH_COMMENT_METRICS,
   VIEW_SUSPENSION_INFO,
   LIST_OWN_TOKENS
 } = require('../../perms/constants');
@@ -79,7 +78,7 @@ const User = {
 
   // Extract the reliability from the user metadata if they have permission.
   reliable(user, _, {user: requestingUser}) {
-    if (requestingUser && requestingUser.can(SEARCH_COMMENT_METRICS)) {
+    if (requestingUser && requestingUser.can(SEARCH_ACTIONS)) {
       return KarmaService.model(user);
     }
   },
diff --git a/graph/typeDefs.graphql b/graph/typeDefs.graphql
index 44b906e24..182504abb 100644
--- a/graph/typeDefs.graphql
+++ b/graph/typeDefs.graphql
@@ -818,19 +818,6 @@ enum USER_STATUS {
   APPROVED
 }
 
-# Metrics for the assets.
-enum ASSET_METRICS_SORT {
-
-  # Represents a FlagAction.
-  FLAG
-
-  # Represents a don't agree action.
-  DONTAGREE
-
-  # Represents activity.
-  ACTIVITY
-}
-
 type RootQuery {
 
   # Site wide settings and defaults.
@@ -865,14 +852,6 @@ type RootQuery {
 
   # a single User by id
   user(id: ID!): User
-
-  # Asset metrics related to user actions are saturated into the assets
-  # returned. Parameters `from` and `to` are related to the action created_at field.
-  assetMetrics(from: Date!, to: Date!, sortBy: ASSET_METRICS_SORT!, limit: Int = 10): [Asset!]
-
-  # Comment metrics related to user actions are saturated into the comments
-  # returned. Parameters `from` and `to` are related to the action created_at field.
-  commentMetrics(from: Date!, to: Date!, sortBy: ACTION_TYPE!, limit: Int = 10): [Comment!]
 }
 
 ################################################################################
diff --git a/perms/constants.js b/perms/constants.js
index 9cda7442b..7841e9711 100644
--- a/perms/constants.js
+++ b/perms/constants.js
@@ -26,7 +26,6 @@ module.exports = {
   SEARCH_ACTIONS: 'SEARCH_ACTIONS',
   SEARCH_NON_NULL_OR_ACCEPTED_COMMENTS: 'SEARCH_NON_NULL_OR_ACCEPTED_COMMENTS',
   SEARCH_OTHERS_COMMENTS: 'SEARCH_OTHERS_COMMENTS',
-  SEARCH_COMMENT_METRICS: 'SEARCH_COMMENT_METRICS',
   LIST_OWN_TOKENS: 'LIST_OWN_TOKENS',
   SEARCH_COMMENT_STATUS_HISTORY: 'SEARCH_COMMENT_STATUS_HISTORY',
   VIEW_SUSPENSION_INFO: 'VIEW_SUSPENSION_INFO',
diff --git a/perms/queryReducer.js b/perms/queryReducer.js
index b71c3d964..2cc5b95eb 100644
--- a/perms/queryReducer.js
+++ b/perms/queryReducer.js
@@ -13,8 +13,6 @@ module.exports = (user, perm) => {
     return check(user, ['ADMIN', 'MODERATOR']);
   case types.SEARCH_OTHERS_COMMENTS:
     return check(user, ['ADMIN', 'MODERATOR']);
-  case types.SEARCH_COMMENT_METRICS:
-    return check(user, ['ADMIN', 'MODERATOR']);
   case types.LIST_OWN_TOKENS:
     return check(user, ['ADMIN']);
   case types.SEARCH_COMMENT_STATUS_HISTORY:
diff --git a/test/server/graph/loaders/metrics.js b/test/server/graph/loaders/metrics.js
deleted file mode 100644
index 4414428bd..000000000
--- a/test/server/graph/loaders/metrics.js
+++ /dev/null
@@ -1,133 +0,0 @@
-const {graphql} = require('graphql');
-
-const schema = require('../../../../graph/schema');
-const Context = require('../../../../graph/context');
-const UserModel = require('../../../../models/user');
-const AssetModel = require('../../../../models/asset');
-const SettingsService = require('../../../../services/settings');
-const ActionModel = require('../../../../models/action');
-const CommentModel = require('../../../../models/comment');
-
-const {expect} = require('chai');
-
-describe('graph.loaders.Metrics', () => {
-  beforeEach(() => SettingsService.init());
-
-  describe('#Comments', () => {
-    const query = `
-      query CommentMetrics($from: Date!, $to: Date!) {
-        flagged: commentMetrics(from: $from, to: $to, sortBy: FLAG) {
-          id
-        }
-      }
-    `;
-
-    describe('different comment states', () => {
-
-      beforeEach(() => CommentModel.create([
-        {id: '1', body: 'a new comment!'},
-        {id: '2', body: 'a new comment!'},
-        {id: '3', body: 'a new comment!'}
-      ]));
-
-      [
-        {flagged: 0, actions: []},
-        {flagged: 1, actions: [{action_type: 'FLAG', item_id: '1', item_type: 'COMMENTS'}]},
-        {flagged: 1, actions: [
-          {action_type: 'FLAG', item_id: '1', item_type: 'COMMENTS'},
-        ]},
-        {flagged: 1, actions: [
-          {action_type: 'FLAG', item_id: '3', item_type: 'COMMENTS'}
-        ]}
-      ].forEach(({flagged, actions}) => {
-
-        describe(`with actions=${actions.length}`, () => {
-
-          beforeEach(() => ActionModel.create(actions));
-
-          it(`returns the correct amount of metrics flagged=${flagged}`, () => {
-            const context = new Context({user: new UserModel({roles: ['ADMIN']})});
-
-            return graphql(schema, query, {}, context, {
-              from: (new Date()).setMinutes((new Date()).getMinutes() - 5),
-              to: (new Date()).setMinutes((new Date()).getMinutes() + 5)
-            })
-              .then(({data, errors}) => {
-                expect(errors).to.be.undefined;
-                expect(data.flagged).to.have.length(flagged);
-              });
-          });
-
-        });
-
-      });
-
-    });
-  });
-
-  describe('#Assets', () => {
-    const query = `
-      fragment metrics on Asset {
-        id
-        action_summaries {
-          actionCount
-          actionableItemCount
-        }
-      }
-
-      query Metrics($from: Date!, $to: Date!) {
-        assetsByFlag: assetMetrics(from: $from, to: $to, sortBy: FLAG) {
-          ...metrics
-        }
-      }
-    `;
-
-    describe('different comment states', () => {
-
-      beforeEach(() => Promise.all([
-        AssetModel.create([
-          {id: 'a1', url: 'http://localhost:3030/article/1'},
-          {id: 'a2', url: 'http://localhost:3030/article/2'}
-        ]),
-        CommentModel.create([
-          {id: 'c1', asset_id: 'a1', body: 'a new comment!'},
-          {id: 'c2', asset_id: 'a1', body: 'a new comment!'},
-          {id: 'c3', asset_id: 'a1', body: 'a new comment!'}
-        ])
-      ]));
-
-      [
-        {flagged: 0, actions: []},
-        {flagged: 1, actions: [{action_type: 'FLAG', item_id: 'c1', item_type: 'COMMENTS'}]},
-        {flagged: 1, actions: [
-          {action_type: 'FLAG', item_id: 'c1', item_type: 'COMMENTS'},
-        ]},
-        {flagged: 1, actions: [
-          {action_type: 'FLAG', item_id: 'c3', item_type: 'COMMENTS'}
-        ]}
-      ].forEach(({flagged, actions}) => {
-
-        describe(`with actions=${actions.length}`, () => {
-
-          beforeEach(() => ActionModel.create(actions));
-
-          it(`returns the correct amount of metrics flagged=${flagged}`, () => {
-            const context = new Context({user: new UserModel({roles: ['ADMIN']})});
-
-            return graphql(schema, query, {}, context, {
-              from: (new Date()).setMinutes((new Date()).getMinutes() - 5),
-              to: (new Date()).setMinutes((new Date()).getMinutes() + 5)
-            })
-              .then(({data, errors}) => {
-                expect(errors).to.be.undefined;
-                expect(data.assetsByFlag).to.have.length(flagged);
-              });
-          });
-
-        });
-
-      });
-
-    });
-  });
-});

From dff89ec6cd327799e2552be41df4ce2035fe269e Mon Sep 17 00:00:00 2001
From: Kim Gardner <kgardnr@gmail.com>
Date: Fri, 1 Dec 2017 12:53:17 +0000
Subject: [PATCH 13/36] Remove Dashboard docs

---
 docs/_docs/03-03-product-guide-moderator-features.md | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/docs/_docs/03-03-product-guide-moderator-features.md b/docs/_docs/03-03-product-guide-moderator-features.md
index 45516b1a5..064257623 100644
--- a/docs/_docs/03-03-product-guide-moderator-features.md
+++ b/docs/_docs/03-03-product-guide-moderator-features.md
@@ -8,13 +8,6 @@ permalink: /moderator-features/
 The Admin is your moderators will moderate your comments, and your Admins will
 configure and manage the different parts of Talk.
 
-### Dashboard
-
-The Dashboard provides real-time information to moderators so they know at a
-glance where they should direct their attention. It shows what articles are
-receiving the most reports and where the most active conversations are
-happening.
-
 ### Moderate
 
 This is the tab where Moderators will spend the majority of their time. They can

From fd83fed7bb068f5efa453ff4c1131ba0acbf43a3 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 1 Dec 2017 14:10:38 +0100
Subject: [PATCH 14/36] Preoptimize queries and subscriptions documents

---
 .../coral-framework/graphql/reduceDocument.js | 237 ++++++++++++++++++
 client/coral-framework/hocs/withQuery.js      |   6 +-
 package.json                                  |   1 +
 yarn.lock                                     |   4 +
 4 files changed, 247 insertions(+), 1 deletion(-)
 create mode 100644 client/coral-framework/graphql/reduceDocument.js

diff --git a/client/coral-framework/graphql/reduceDocument.js b/client/coral-framework/graphql/reduceDocument.js
new file mode 100644
index 000000000..d0a9cc30f
--- /dev/null
+++ b/client/coral-framework/graphql/reduceDocument.js
@@ -0,0 +1,237 @@
+import {
+  getMainDefinition,
+  getFragmentDefinitions,
+  createFragmentMap,
+  shouldInclude,
+  getOperationDefinition,
+} from 'apollo-utilities';
+
+function getDefinitionName(definition) {
+  switch (definition.kind) {
+  case 'FragmentSpread':
+    return definition.name.value;
+  case 'Field':
+    return `Field_${definition.alias ? definition.alias.value : definition.name.value}`;
+  case 'InlineFragment':
+    return `InlineFragment_${definition.typeCondition.name.value}`;
+  default:
+    throw new Error(`unknown definition kind ${definition.kind}`);
+  }
+}
+
+/**
+ * Merge selections of 2 definitions.
+ */
+export function mergeDefinitions(a, b) {
+  const name = getDefinitionName(a);
+
+  if (!!a.selectionSet !== !!b.selectionSet) {
+    throw Error(`incompatible field definition for ${name}`);
+  }
+
+  if (!a.selectionSet) {
+    return b;
+  }
+
+  const selectionSet = mergeSelectionSets(a.selectionSet, b.selectionSet);
+
+  return {
+    ...b,
+    selectionSet,
+  };
+}
+
+/**
+ * Merge selectionSets
+ */
+export function mergeSelectionSets(a, b) {
+  const selectionsMap = [...a.selections, ...b.selections].reduce((o, sel) => {
+    const selName = getDefinitionName(sel);
+    if (!(selName in o)) {
+      o[selName] = sel;
+      return o;
+    }
+    o[selName] = mergeDefinitions(o[selName], sel);
+    return o;
+  }, {});
+
+  const selections = Object.keys(selectionsMap).map((key) => selectionsMap[key]);
+
+  return {
+    ...b,
+    selections,
+  };
+}
+
+/**
+ * Return selections with resolved named fragments and directives.
+ */
+function getTransformedSelections(definition, path, gqlType, execContext) {
+  const {
+    fragmentMap,
+    variables,
+  } = execContext;
+
+  const selectionsMap = definition.selectionSet.selections.reduce((o, sel) => {
+    if (variables && !shouldInclude(sel, variables)) {
+
+      // Skip this entirely
+      return o;
+    }
+    if (sel.kind !== 'FragmentSpread') {
+      const transformed = transformDefinition(sel, execContext, path, gqlType);
+      const name = getDefinitionName(sel);
+
+      // Merge existing value.
+      if (name in o) {
+        o[name] = mergeDefinitions(o[name], transformed);
+        return o;
+      }
+
+      o[name] = transformed;
+      return o;
+    }
+
+    const fragment = fragmentMap[sel.name.value];
+
+    if (!fragment) {
+      throw new Error(`fragment ${fragment.name.value} does not exist`);
+    }
+
+    const typeCondition = fragment.typeCondition.name.value;
+
+    if (gqlType !== typeCondition) {
+      const node = {
+        ...fragment,
+        kind: 'InlineFragment',
+      };
+      const transformed = transformDefinition(node, execContext, path, typeCondition);
+      const name = getDefinitionName(node);
+
+      // Merge existing value.
+      if (name in o) {
+        o[name] = mergeDefinitions(o[name], transformed);
+        return o;
+      }
+
+      o[name] = transformed;
+      return o;
+    }
+
+    const fragmentSelections = getTransformedSelections(fragment, path, typeCondition, execContext);
+    fragmentSelections.forEach((s) => {
+
+      if (variables && !shouldInclude(s, variables)) {
+
+        // Skip this entirely
+        return;
+      }
+
+      const selName = getDefinitionName(s);
+      if (!(selName in o)) {
+        o[selName] = s;
+        return;
+      }
+
+      o[selName] = mergeDefinitions(o[selName], s);
+    });
+    return o;
+  }, {});
+
+  const selections = Object.keys(selectionsMap).map((key) => selectionsMap[key]);
+  return selections;
+}
+
+/**
+ * Resolve named fragments and directives in a definition.
+ */
+function transformDefinition(definition, execContext, path = '', type = null) {
+  if (!definition.selectionSet) {
+    return definition;
+  }
+
+  const {typeGetter} = execContext;
+
+  if (definition.kind === 'Field') {
+    const fieldName = definition.name.value;
+    path = `${path}.${fieldName}`;
+
+    if (typeGetter) {
+      type = typeGetter(path);
+    }
+  }
+
+  // InlineFragments
+  else if(!type && typeGetter) {
+    type = typeGetter(path);
+  }
+
+  return {
+    ...definition,
+    selectionSet: {
+      ...definition.selectionSet,
+      selections: getTransformedSelections(definition, path, type, execContext),
+    },
+  };
+}
+
+export default function reduceDocument(document, options = {}) {
+  const mainDefinition = getMainDefinition(document);
+  const fragments = getFragmentDefinitions(document);
+  const operationDefinition = getOperationDefinition(document);
+  const path = operationDefinition.operation;
+
+  const execContext = {
+    fragmentMap: createFragmentMap(fragments),
+    keepFragments: [],
+    variables: options.variables,
+    typeGetter: options.typeGetter || (() => null),
+  };
+
+  return {
+    kind: 'Document',
+    definitions: [transformDefinition(mainDefinition, execContext, path)],
+  };
+}
+
+function getObjectType(fieldType) {
+  if (['NON_NULL', 'LIST'].indexOf(fieldType.kind) > -1) {
+    return getObjectType(fieldType.ofType);
+  }
+  return fieldType.name;
+}
+
+function getFieldType(parentType, fieldName) {
+  const field = parentType.fields.find((f) => f.name === fieldName);
+  return getObjectType(field.type);
+}
+
+export function createTypeGetter(introspectionData) {
+  const types = {};
+  introspectionData.__schema.types.forEach((type) => types[type.name] = type);
+
+  const result = {
+    'query': introspectionData.__schema.queryType.name,
+    'mutation': introspectionData.__schema.mutationType.name,
+    'subscription': introspectionData.__schema.subscriptionType.name,
+  };
+
+  return (path) => {
+    if (result[path]) {
+      return result[path];
+    }
+    let currentPath = '';
+    const parts = path.split('.');
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i];
+      const nextPath = currentPath ? `${currentPath}.${part}` : part;
+      if (nextPath in result) {
+        currentPath = nextPath;
+        continue;
+      }
+      result[nextPath] = getFieldType(types[result[currentPath]], part);
+      currentPath = nextPath;
+    }
+    return result[path];
+  };
+}
diff --git a/client/coral-framework/hocs/withQuery.js b/client/coral-framework/hocs/withQuery.js
index eaf740ffb..dac2bb221 100644
--- a/client/coral-framework/hocs/withQuery.js
+++ b/client/coral-framework/hocs/withQuery.js
@@ -6,6 +6,10 @@ import hoistStatics from 'recompose/hoistStatics';
 import {getOperationName} from 'apollo-client/queries/getFromAST';
 import {addTypenameToDocument} from 'apollo-client/queries/queryTransform';
 import throttle from 'lodash/throttle';
+import reduceDocument, {createTypeGetter} from '../graphql/reduceDocument';
+import introspectionData from '../graphql/introspection.json';
+
+const typeGetter = createTypeGetter(introspectionData);
 
 const withSkipOnErrors = (reducer) => (prev, action, ...rest) => {
   if (action.type === 'APOLLO_MUTATION_RESULT' && getResponseErrors(action.result)) {
@@ -68,7 +72,7 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
       let document = typeof documentOrCallback === 'function'
         ? documentOrCallback(this.props, this.context)
         : documentOrCallback;
-      document = this.graphqlRegistry.resolveFragments(document);
+      document = reduceDocument(this.graphqlRegistry.resolveFragments(document), {typeGetter});
 
       // We also add typenames to the document which apollo would usually do,
       // but we also use the network interface in subscriptions directly
diff --git a/package.json b/package.json
index 7a71114a3..9cdc2a03d 100644
--- a/package.json
+++ b/package.json
@@ -60,6 +60,7 @@
   "dependencies": {
     "accepts": "^1.3.4",
     "apollo-client": "^1.9.1",
+    "apollo-utilities": "^1.0.3",
     "app-module-path": "^2.2.0",
     "autoprefixer": "^6.5.2",
     "babel-cli": "6.26.0",
diff --git a/yarn.lock b/yarn.lock
index f393a3f99..6d31966e6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -259,6 +259,10 @@ apollo-link-core@^0.5.0:
     graphql-tag "^2.4.2"
     zen-observable-ts "^0.4.4"
 
+apollo-utilities@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/apollo-utilities/-/apollo-utilities-1.0.3.tgz#bf435277609850dd442cf1d5c2e8bc6655eaa943"
+
 app-module-path@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/app-module-path/-/app-module-path-2.2.0.tgz#641aa55dfb7d6a6f0a8141c4b9c0aa50b6c24dd5"

From 5c1314165c0dcaf2dfe6fd6115122e684ef9a879 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 1 Dec 2017 14:16:32 +0100
Subject: [PATCH 15/36] Upgrade graphql-anywhere-optimized

---
 yarn.lock | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/yarn.lock b/yarn.lock
index 6d31966e6..25de6dd3a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3513,7 +3513,7 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.4, graceful-fs@^4.1.6:
 
 "graphql-anywhere-optimized@git+https://git@github.com/cvle/graphql-anywhere#optimized":
   version "3.1.0"
-  resolved "git+https://git@github.com/cvle/graphql-anywhere#7338ffed17ff27d79e56ae09ad4adeea33c21388"
+  resolved "git+https://git@github.com/cvle/graphql-anywhere#3f5d9e5c619ac4c4065af83abd7f76b84fb81e7c"
 
 graphql-anywhere@^3.0.1:
   version "3.1.0"

From 2c7297513700b66e819c316f35dceedc20a9eb2f Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 1 Dec 2017 15:42:13 +0100
Subject: [PATCH 16/36] Preoptimize mutation, fragments and batched
 subscription documents

---
 .../components/TalkProvider.js                |  4 +--
 .../coral-framework/graphql/reduceDocument.js | 15 ++++++++++-
 client/coral-framework/hocs/withFragments.js  |  9 +++----
 client/coral-framework/hocs/withMutation.js   |  9 +++----
 client/coral-framework/hocs/withQuery.js      | 21 +++------------
 client/coral-framework/services/bootstrap.js  | 14 ++++++----
 client/coral-framework/services/graphql.js    | 26 +++++++++++++++++++
 7 files changed, 61 insertions(+), 37 deletions(-)
 create mode 100644 client/coral-framework/services/graphql.js

diff --git a/client/coral-framework/components/TalkProvider.js b/client/coral-framework/components/TalkProvider.js
index 880b4c9d9..1b9c5ca9c 100644
--- a/client/coral-framework/components/TalkProvider.js
+++ b/client/coral-framework/components/TalkProvider.js
@@ -9,7 +9,7 @@ class TalkProvider extends React.Component {
       pym: this.props.pym,
       plugins: this.props.plugins,
       rest: this.props.rest,
-      graphqlRegistry: this.props.graphqlRegistry,
+      graphql: this.props.graphql,
       notification: this.props.notification,
       storage: this.props.storage,
       history: this.props.history,
@@ -32,7 +32,7 @@ TalkProvider.childContextTypes = {
   eventEmitter: PropTypes.object,
   plugins: PropTypes.object,
   rest: PropTypes.func,
-  graphqlRegistry: PropTypes.object,
+  graphql: PropTypes.object,
   notification: PropTypes.object,
   storage: PropTypes.object,
   history: PropTypes.object,
diff --git a/client/coral-framework/graphql/reduceDocument.js b/client/coral-framework/graphql/reduceDocument.js
index d0a9cc30f..3e0118eba 100644
--- a/client/coral-framework/graphql/reduceDocument.js
+++ b/client/coral-framework/graphql/reduceDocument.js
@@ -179,7 +179,9 @@ export default function reduceDocument(document, options = {}) {
   const mainDefinition = getMainDefinition(document);
   const fragments = getFragmentDefinitions(document);
   const operationDefinition = getOperationDefinition(document);
-  const path = operationDefinition.operation;
+  const path = operationDefinition
+    ? operationDefinition.operation
+    : `type.${mainDefinition.typeCondition.name.value}`;
 
   const execContext = {
     fragmentMap: createFragmentMap(fragments),
@@ -224,6 +226,17 @@ export function createTypeGetter(introspectionData) {
     const parts = path.split('.');
     for (let i = 0; i < parts.length; i++) {
       const part = parts[i];
+
+      // Handle special path e.g. 'type.ROOT_QUERY.fieldName'
+      if (part === 'type') {
+        const type = parts[i + 1];
+        const nextPath = `type.${type}`;
+        result[nextPath] = type;
+        currentPath = nextPath;
+        i++;
+        continue;
+      }
+
       const nextPath = currentPath ? `${currentPath}.${part}` : part;
       if (nextPath in result) {
         currentPath = nextPath;
diff --git a/client/coral-framework/hocs/withFragments.js b/client/coral-framework/hocs/withFragments.js
index be6d07fed..3411e7552 100644
--- a/client/coral-framework/hocs/withFragments.js
+++ b/client/coral-framework/hocs/withFragments.js
@@ -64,18 +64,15 @@ function hasEqualLeaves(a, b, path = '') {
 export default (fragments) => hoistStatics((BaseComponent) => {
   class WithFragments extends React.Component {
     static contextTypes = {
-      graphqlRegistry: PropTypes.object,
+      graphql: PropTypes.object,
     };
 
     get graphqlRegistry() {
-      return this.context.graphqlRegistry;
+      return this.context.graphql.registry;
     }
 
     resolveDocument(documentOrCallback) {
-      const document = typeof documentOrCallback === 'function'
-        ? documentOrCallback(this.props, this.context)
-        : documentOrCallback;
-      return this.graphqlRegistry.resolveFragments(document);
+      return this.context.graphql.resolveDocument(documentOrCallback, this.props, this.context);
     }
 
     fragments = mapValues(fragments, (val) => this.resolveDocument(val));
diff --git a/client/coral-framework/hocs/withMutation.js b/client/coral-framework/hocs/withMutation.js
index cb6bc3789..639dbd461 100644
--- a/client/coral-framework/hocs/withMutation.js
+++ b/client/coral-framework/hocs/withMutation.js
@@ -42,18 +42,15 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
     static contextTypes = {
       eventEmitter: PropTypes.object,
       store: PropTypes.object,
-      graphqlRegistry: PropTypes.object,
+      graphql: PropTypes.object,
     };
 
     get graphqlRegistry() {
-      return this.context.graphqlRegistry;
+      return this.context.graphql.registry;
     }
 
     resolveDocument(documentOrCallback) {
-      const document = typeof documentOrCallback === 'function'
-        ? documentOrCallback(this.props, this.context)
-        : documentOrCallback;
-      return this.graphqlRegistry.resolveFragments(document);
+      return this.context.graphql.resolveDocument(documentOrCallback, this.props, this.context);
     }
 
     // Lazily resolve fragments from graphRegistry to support circular dependencies.
diff --git a/client/coral-framework/hocs/withQuery.js b/client/coral-framework/hocs/withQuery.js
index dac2bb221..8f0155a11 100644
--- a/client/coral-framework/hocs/withQuery.js
+++ b/client/coral-framework/hocs/withQuery.js
@@ -4,12 +4,7 @@ import {getDefinitionName, separateDataAndRoot, getResponseErrors} from '../util
 import PropTypes from 'prop-types';
 import hoistStatics from 'recompose/hoistStatics';
 import {getOperationName} from 'apollo-client/queries/getFromAST';
-import {addTypenameToDocument} from 'apollo-client/queries/queryTransform';
 import throttle from 'lodash/throttle';
-import reduceDocument, {createTypeGetter} from '../graphql/reduceDocument';
-import introspectionData from '../graphql/introspection.json';
-
-const typeGetter = createTypeGetter(introspectionData);
 
 const withSkipOnErrors = (reducer) => (prev, action, ...rest) => {
   if (action.type === 'APOLLO_MUTATION_RESULT' && getResponseErrors(action.result)) {
@@ -46,7 +41,7 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
   return class WithQuery extends React.Component {
     static contextTypes = {
       eventEmitter: PropTypes.object,
-      graphqlRegistry: PropTypes.object,
+      graphql: PropTypes.object,
       client: PropTypes.object,
     };
 
@@ -61,7 +56,7 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
     subscriptionQueue = [];
 
     get graphqlRegistry() {
-      return this.context.graphqlRegistry;
+      return this.context.graphql.registry;
     }
 
     get client() {
@@ -69,15 +64,7 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
     }
 
     resolveDocument(documentOrCallback) {
-      let document = typeof documentOrCallback === 'function'
-        ? documentOrCallback(this.props, this.context)
-        : documentOrCallback;
-      document = reduceDocument(this.graphqlRegistry.resolveFragments(document), {typeGetter});
-
-      // We also add typenames to the document which apollo would usually do,
-      // but we also use the network interface in subscriptions directly
-      // which require the resolved typenames.
-      return addTypenameToDocument(document);
+      return this.context.graphql.resolveDocument(documentOrCallback, this.props, this.context);
     }
 
     emitWhenNeeded(data) {
@@ -124,7 +111,7 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
     subscribeToMoreThrottled = ({document, variables, updateQuery}) => {
 
       // We need to add the typenames and resolve fragments.
-      const query = addTypenameToDocument(this.graphqlRegistry.resolveFragments(document));
+      const query = this.resolveDocument(document);
       const handler = (error, data) => {
         if (error) {
 
diff --git a/client/coral-framework/services/bootstrap.js b/client/coral-framework/services/bootstrap.js
index 9862ff23c..4fcc83a52 100644
--- a/client/coral-framework/services/bootstrap.js
+++ b/client/coral-framework/services/bootstrap.js
@@ -12,6 +12,7 @@ import {BASE_PATH} from 'coral-framework/constants/url';
 import {createPluginsService} from './plugins';
 import {createNotificationService} from './notification';
 import {createGraphQLRegistry} from './graphqlRegistry';
+import {createGraphQLService} from './graphql';
 import globalFragments from 'coral-framework/graphql/fragments';
 import {createStorage, createPymStorage} from 'coral-framework/services/storage';
 import {createHistory} from 'coral-framework/services/history';
@@ -121,7 +122,10 @@ export async function createContext({
     introspectionData,
   });
   const plugins = createPluginsService(pluginsConfig);
-  const graphqlRegistry = createGraphQLRegistry(plugins.getSlotFragments.bind(plugins));
+  const graphql = createGraphQLService(
+    createGraphQLRegistry(plugins.getSlotFragments.bind(plugins)),
+    introspectionData,
+  );
   if (!notification) {
 
     // Use default notification service (pym based)
@@ -134,7 +138,7 @@ export async function createContext({
     plugins,
     eventEmitter,
     rest,
-    graphqlRegistry,
+    graphql,
     notification,
     storage,
     history,
@@ -143,13 +147,13 @@ export async function createContext({
   };
 
   // Load framework fragments.
-  Object.keys(globalFragments).forEach((key) => graphqlRegistry.addFragment(key, globalFragments[key]));
+  Object.keys(globalFragments).forEach((key) => graphql.registry.addFragment(key, globalFragments[key]));
 
   // Register graphql extension
-  graphqlRegistry.add(graphqlExtension);
+  graphql.registry.add(graphqlExtension);
 
   // Register plugin graphql extensions.
-  plugins.getGraphQLExtensions().forEach((ext) => graphqlRegistry.add(ext));
+  plugins.getGraphQLExtensions().forEach((ext) => graphql.registry.add(ext));
 
   // Load plugin translations.
   plugins.getTranslations().forEach((t) => loadTranslations(t));
diff --git a/client/coral-framework/services/graphql.js b/client/coral-framework/services/graphql.js
new file mode 100644
index 000000000..42e9cd8ad
--- /dev/null
+++ b/client/coral-framework/services/graphql.js
@@ -0,0 +1,26 @@
+import reduceDocument, {createTypeGetter} from '../graphql/reduceDocument';
+import {addTypenameToDocument} from 'apollo-client/queries/queryTransform';
+
+/**
+ * createHistory returns the history service for react router
+ * @param  {string}  basename  base path of the url
+ * @return {Object}  histor service
+ */
+export function createGraphQLService(registry, introspectionData) {
+  const typeGetter = createTypeGetter(introspectionData);
+
+  return {
+    registry,
+    resolveDocument(documentOrCallback, props, context) {
+      let document = typeof documentOrCallback === 'function'
+        ? documentOrCallback(props, context)
+        : documentOrCallback;
+      document = reduceDocument(registry.resolveFragments(document), {typeGetter});
+
+      // We also add typenames to the document which apollo would usually do,
+      // but we also use the network interface in subscriptions directly
+      // which require the resolved typenames.
+      return addTypenameToDocument(document);
+    },
+  };
+}

From f17b296e2e3ff46d4839e7bb6c3edef702ffab9c Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 1 Dec 2017 16:31:26 +0100
Subject: [PATCH 17/36] Cache resolved fragments (globally)

---
 .../coral-admin/src/containers/UserDetail.js  |  4 +--
 .../coral-framework/graphql/reduceDocument.js | 34 +++++++++++++++----
 client/coral-framework/services/graphql.js    |  6 +++-
 3 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/client/coral-admin/src/containers/UserDetail.js b/client/coral-admin/src/containers/UserDetail.js
index 3a458ff83..702ca4d81 100644
--- a/client/coral-admin/src/containers/UserDetail.js
+++ b/client/coral-admin/src/containers/UserDetail.js
@@ -19,7 +19,7 @@ import update from 'immutability-helper';
 import {notify} from 'coral-framework/actions/notification';
 
 const commentConnectionFragment = gql`
-  fragment CoralAdmin_Moderation_CommentConnection on CommentConnection {
+  fragment CoralAdmin_UserDetail_CommentConnection on CommentConnection {
     nodes {
       ...${getDefinitionName(UserDetailComment.fragments.comment)}
     }
@@ -155,7 +155,7 @@ export const withUserDetailQuery = withQuery(gql`
       author_id: $author_id,
       statuses: $statuses
     }) {
-      ...CoralAdmin_Moderation_CommentConnection
+      ...CoralAdmin_UserDetail_CommentConnection
     }
     ...${getDefinitionName(UserDetailComment.fragments.root)}
     ${getSlotFragmentSpreads(slots, 'root')}
diff --git a/client/coral-framework/graphql/reduceDocument.js b/client/coral-framework/graphql/reduceDocument.js
index 3e0118eba..fb47daaff 100644
--- a/client/coral-framework/graphql/reduceDocument.js
+++ b/client/coral-framework/graphql/reduceDocument.js
@@ -63,12 +63,32 @@ export function mergeSelectionSets(a, b) {
   };
 }
 
+function getFragment(name, execContext) {
+  const {
+    rawFragmentMap,
+    fragmentMap,
+  } = execContext;
+
+  if (!(name in fragmentMap)) {
+    const fragment = rawFragmentMap[name];
+
+    if (!fragment) {
+      throw new Error(`fragment ${fragment.name.value} does not exist`);
+    }
+
+    const typeCondition = fragment.typeCondition.name.value;
+    const transformed = transformDefinition(fragment, execContext, `type.${typeCondition}`, typeCondition);
+    fragmentMap[name] = transformed;
+  }
+
+  return fragmentMap[name];
+}
+
 /**
  * Return selections with resolved named fragments and directives.
  */
 function getTransformedSelections(definition, path, gqlType, execContext) {
   const {
-    fragmentMap,
     variables,
   } = execContext;
 
@@ -92,7 +112,7 @@ function getTransformedSelections(definition, path, gqlType, execContext) {
       return o;
     }
 
-    const fragment = fragmentMap[sel.name.value];
+    const fragment = getFragment(sel.name.value, execContext);
 
     if (!fragment) {
       throw new Error(`fragment ${fragment.name.value} does not exist`);
@@ -105,20 +125,19 @@ function getTransformedSelections(definition, path, gqlType, execContext) {
         ...fragment,
         kind: 'InlineFragment',
       };
-      const transformed = transformDefinition(node, execContext, path, typeCondition);
       const name = getDefinitionName(node);
 
       // Merge existing value.
       if (name in o) {
-        o[name] = mergeDefinitions(o[name], transformed);
+        o[name] = mergeDefinitions(o[name], node);
         return o;
       }
 
-      o[name] = transformed;
+      o[name] = node;
       return o;
     }
 
-    const fragmentSelections = getTransformedSelections(fragment, path, typeCondition, execContext);
+    const fragmentSelections = fragment.selectionSet.selections;
     fragmentSelections.forEach((s) => {
 
       if (variables && !shouldInclude(s, variables)) {
@@ -184,7 +203,8 @@ export default function reduceDocument(document, options = {}) {
     : `type.${mainDefinition.typeCondition.name.value}`;
 
   const execContext = {
-    fragmentMap: createFragmentMap(fragments),
+    rawFragmentMap: createFragmentMap(fragments),
+    fragmentMap: options.fragmentMap || {},
     keepFragments: [],
     variables: options.variables,
     typeGetter: options.typeGetter || (() => null),
diff --git a/client/coral-framework/services/graphql.js b/client/coral-framework/services/graphql.js
index 42e9cd8ad..87b8e220a 100644
--- a/client/coral-framework/services/graphql.js
+++ b/client/coral-framework/services/graphql.js
@@ -9,13 +9,17 @@ import {addTypenameToDocument} from 'apollo-client/queries/queryTransform';
 export function createGraphQLService(registry, introspectionData) {
   const typeGetter = createTypeGetter(introspectionData);
 
+  // Use shared fragment map.
+  // Attention: Fragment names must be unique otherwise weird things will happen.
+  const fragmentMap = {};
+
   return {
     registry,
     resolveDocument(documentOrCallback, props, context) {
       let document = typeof documentOrCallback === 'function'
         ? documentOrCallback(props, context)
         : documentOrCallback;
-      document = reduceDocument(registry.resolveFragments(document), {typeGetter});
+      document = reduceDocument(registry.resolveFragments(document), {typeGetter, fragmentMap});
 
       // We also add typenames to the document which apollo would usually do,
       // but we also use the network interface in subscriptions directly

From 72123cabe70e6afaa6333227cdcfdd80da2ff22f Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 1 Dec 2017 16:33:38 +0100
Subject: [PATCH 18/36] Rename getDefinitionName to getDefinitionID

---
 client/coral-framework/graphql/reduceDocument.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/client/coral-framework/graphql/reduceDocument.js b/client/coral-framework/graphql/reduceDocument.js
index fb47daaff..d105cbbea 100644
--- a/client/coral-framework/graphql/reduceDocument.js
+++ b/client/coral-framework/graphql/reduceDocument.js
@@ -6,10 +6,10 @@ import {
   getOperationDefinition,
 } from 'apollo-utilities';
 
-function getDefinitionName(definition) {
+function getDefinitionID(definition) {
   switch (definition.kind) {
   case 'FragmentSpread':
-    return definition.name.value;
+    return `FragmentSpread_${definition.name.value}`;
   case 'Field':
     return `Field_${definition.alias ? definition.alias.value : definition.name.value}`;
   case 'InlineFragment':
@@ -23,7 +23,7 @@ function getDefinitionName(definition) {
  * Merge selections of 2 definitions.
  */
 export function mergeDefinitions(a, b) {
-  const name = getDefinitionName(a);
+  const name = getDefinitionID(a);
 
   if (!!a.selectionSet !== !!b.selectionSet) {
     throw Error(`incompatible field definition for ${name}`);
@@ -46,7 +46,7 @@ export function mergeDefinitions(a, b) {
  */
 export function mergeSelectionSets(a, b) {
   const selectionsMap = [...a.selections, ...b.selections].reduce((o, sel) => {
-    const selName = getDefinitionName(sel);
+    const selName = getDefinitionID(sel);
     if (!(selName in o)) {
       o[selName] = sel;
       return o;
@@ -100,7 +100,7 @@ function getTransformedSelections(definition, path, gqlType, execContext) {
     }
     if (sel.kind !== 'FragmentSpread') {
       const transformed = transformDefinition(sel, execContext, path, gqlType);
-      const name = getDefinitionName(sel);
+      const name = getDefinitionID(sel);
 
       // Merge existing value.
       if (name in o) {
@@ -125,7 +125,7 @@ function getTransformedSelections(definition, path, gqlType, execContext) {
         ...fragment,
         kind: 'InlineFragment',
       };
-      const name = getDefinitionName(node);
+      const name = getDefinitionID(node);
 
       // Merge existing value.
       if (name in o) {
@@ -146,7 +146,7 @@ function getTransformedSelections(definition, path, gqlType, execContext) {
         return;
       }
 
-      const selName = getDefinitionName(s);
+      const selName = getDefinitionID(s);
       if (!(selName in o)) {
         o[selName] = s;
         return;

From 4c7c852af7dce4f8539212d4d90d7ca30f6f3aab Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 1 Dec 2017 16:44:01 +0100
Subject: [PATCH 19/36] Only merge definitions with directives when they are
 the same

---
 .../coral-framework/graphql/reduceDocument.js   | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/client/coral-framework/graphql/reduceDocument.js b/client/coral-framework/graphql/reduceDocument.js
index d105cbbea..927379ff2 100644
--- a/client/coral-framework/graphql/reduceDocument.js
+++ b/client/coral-framework/graphql/reduceDocument.js
@@ -6,14 +6,27 @@ import {
   getOperationDefinition,
 } from 'apollo-utilities';
 
+import {murmur3} from 'murmurhash-js';
+
+function getDirectivesID(directives) {
+  return murmur3(JSON.stringify(directives));
+}
+
+// If two definitions have the same id, they can be merged.
 function getDefinitionID(definition) {
+
+  // Only merge when directives are exactly the same.
+  const trailing = definition.directives.length
+    ? `_${getDirectivesID(definition.directives)}`
+    : '';
+
   switch (definition.kind) {
   case 'FragmentSpread':
     return `FragmentSpread_${definition.name.value}`;
   case 'Field':
-    return `Field_${definition.alias ? definition.alias.value : definition.name.value}`;
+    return `Field_${definition.alias ? definition.alias.value : definition.name.value}${trailing}`;
   case 'InlineFragment':
-    return `InlineFragment_${definition.typeCondition.name.value}`;
+    return `InlineFragment_${definition.typeCondition.name.value}${trailing}`;
   default:
     throw new Error(`unknown definition kind ${definition.kind}`);
   }

From 015e3d3ed9fbb8ec1866c136103034b5ef5ff2af Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 1 Dec 2017 16:47:54 +0100
Subject: [PATCH 20/36] Tiny refactor

---
 client/coral-framework/graphql/reduceDocument.js | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/client/coral-framework/graphql/reduceDocument.js b/client/coral-framework/graphql/reduceDocument.js
index 927379ff2..a713f8078 100644
--- a/client/coral-framework/graphql/reduceDocument.js
+++ b/client/coral-framework/graphql/reduceDocument.js
@@ -76,7 +76,7 @@ export function mergeSelectionSets(a, b) {
   };
 }
 
-function getFragment(name, execContext) {
+function getFragmentOrDie(name, execContext) {
   const {
     rawFragmentMap,
     fragmentMap,
@@ -125,14 +125,10 @@ function getTransformedSelections(definition, path, gqlType, execContext) {
       return o;
     }
 
-    const fragment = getFragment(sel.name.value, execContext);
-
-    if (!fragment) {
-      throw new Error(`fragment ${fragment.name.value} does not exist`);
-    }
-
+    const fragment = getFragmentOrDie(sel.name.value, execContext);
     const typeCondition = fragment.typeCondition.name.value;
 
+    // Turn NamedFragment into an InlineFragment.
     if (gqlType !== typeCondition) {
       const node = {
         ...fragment,
@@ -150,6 +146,7 @@ function getTransformedSelections(definition, path, gqlType, execContext) {
       return o;
     }
 
+    // Merge NamedFragment directly into selections.
     const fragmentSelections = fragment.selectionSet.selections;
     fragmentSelections.forEach((s) => {
 

From 835d30d362408fcc90bc44579db838870db5deb6 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 1 Dec 2017 16:54:45 +0100
Subject: [PATCH 21/36] Put document optimizations behind a option

---
 client/coral-framework/services/bootstrap.js |  5 ++++-
 client/coral-framework/services/graphql.js   | 23 ++++++++++++++------
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/client/coral-framework/services/bootstrap.js b/client/coral-framework/services/bootstrap.js
index 4fcc83a52..5e6173355 100644
--- a/client/coral-framework/services/bootstrap.js
+++ b/client/coral-framework/services/bootstrap.js
@@ -124,7 +124,10 @@ export async function createContext({
   const plugins = createPluginsService(pluginsConfig);
   const graphql = createGraphQLService(
     createGraphQLRegistry(plugins.getSlotFragments.bind(plugins)),
-    introspectionData,
+    {
+      introspectionData,
+      optimize: true,
+    },
   );
   if (!notification) {
 
diff --git a/client/coral-framework/services/graphql.js b/client/coral-framework/services/graphql.js
index 87b8e220a..859d57d8a 100644
--- a/client/coral-framework/services/graphql.js
+++ b/client/coral-framework/services/graphql.js
@@ -2,16 +2,21 @@ import reduceDocument, {createTypeGetter} from '../graphql/reduceDocument';
 import {addTypenameToDocument} from 'apollo-client/queries/queryTransform';
 
 /**
- * createHistory returns the history service for react router
+ * createGraphQLService
  * @param  {string}  basename  base path of the url
  * @return {Object}  histor service
  */
-export function createGraphQLService(registry, introspectionData) {
-  const typeGetter = createTypeGetter(introspectionData);
+export function createGraphQLService(registry, {
+  introspectionData,
+  optimize = false,
+}) {
+  const reduceOptions = {
+    typeGetter: optimize && introspectionData ? createTypeGetter(introspectionData) : null,
 
-  // Use shared fragment map.
-  // Attention: Fragment names must be unique otherwise weird things will happen.
-  const fragmentMap = {};
+    // Use shared fragment map.
+    // Attention: Fragment names must be unique otherwise weird things will happen.
+    fragmentMap: {},
+  };
 
   return {
     registry,
@@ -19,7 +24,11 @@ export function createGraphQLService(registry, introspectionData) {
       let document = typeof documentOrCallback === 'function'
         ? documentOrCallback(props, context)
         : documentOrCallback;
-      document = reduceDocument(registry.resolveFragments(document), {typeGetter, fragmentMap});
+      document = registry.resolveFragments(document);
+
+      if (optimize) {
+        document = reduceDocument(document, reduceOptions);
+      }
 
       // We also add typenames to the document which apollo would usually do,
       // but we also use the network interface in subscriptions directly

From 612d2596f9e907549eea0e0f22c1bd9740cca556 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 1 Dec 2017 17:02:45 +0100
Subject: [PATCH 22/36] Turn NamedFragments with directives always into
 InlineFragments

---
 client/coral-framework/graphql/reduceDocument.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/coral-framework/graphql/reduceDocument.js b/client/coral-framework/graphql/reduceDocument.js
index a713f8078..d3d5990bf 100644
--- a/client/coral-framework/graphql/reduceDocument.js
+++ b/client/coral-framework/graphql/reduceDocument.js
@@ -129,7 +129,7 @@ function getTransformedSelections(definition, path, gqlType, execContext) {
     const typeCondition = fragment.typeCondition.name.value;
 
     // Turn NamedFragment into an InlineFragment.
-    if (gqlType !== typeCondition) {
+    if (gqlType !== typeCondition || fragment.directives.length) {
       const node = {
         ...fragment,
         kind: 'InlineFragment',
@@ -215,7 +215,6 @@ export default function reduceDocument(document, options = {}) {
   const execContext = {
     rawFragmentMap: createFragmentMap(fragments),
     fragmentMap: options.fragmentMap || {},
-    keepFragments: [],
     variables: options.variables,
     typeGetter: options.typeGetter || (() => null),
   };

From c2b488fa98bb9b98f12166523c0fdc8a6321116e Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 1 Dec 2017 17:11:38 +0100
Subject: [PATCH 23/36] Don't use murmurhash

---
 .../coral-framework/graphql/reduceDocument.js | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/client/coral-framework/graphql/reduceDocument.js b/client/coral-framework/graphql/reduceDocument.js
index d3d5990bf..12e0954d7 100644
--- a/client/coral-framework/graphql/reduceDocument.js
+++ b/client/coral-framework/graphql/reduceDocument.js
@@ -6,10 +6,24 @@ import {
   getOperationDefinition,
 } from 'apollo-utilities';
 
-import {murmur3} from 'murmurhash-js';
-
 function getDirectivesID(directives) {
-  return murmur3(JSON.stringify(directives));
+  let id = '';
+  directives.forEach((directive) => {
+    id += `@${directive.name.value}(`;
+    let first = true;
+    directive.arguments.forEach((arg) => {
+      if (!first) {
+        id += ',';
+      }
+      first = false;
+      const value = arg.value.kind === 'Variable'
+        ? `$${arg.value.name.value}`
+        : arg.value.value;
+      id += `${arg.name.value}:${value}`;
+    });
+    id += ')';
+  });
+  return id;
 }
 
 // If two definitions have the same id, they can be merged.

From 099186d030a45e5e870f3becfb4d688fe9f8f4a8 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 1 Dec 2017 17:56:53 +0100
Subject: [PATCH 24/36] Make polling interval longer

---
 client/coral-admin/src/containers/Header.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/coral-admin/src/containers/Header.js b/client/coral-admin/src/containers/Header.js
index a5c1f0afc..c107d58f9 100644
--- a/client/coral-admin/src/containers/Header.js
+++ b/client/coral-admin/src/containers/Header.js
@@ -19,6 +19,6 @@ export default withQuery(gql`
   }
 `, {
     options: {
-      pollInterval: 5000
+      pollInterval: 10000
     }
   })(Header);

From ce9ee0a5b0428c5f6da15639243d8e2fbb07389a Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 1 Dec 2017 15:28:09 -0300
Subject: [PATCH 25/36] Adding styles for mob devs

---
 .../src/tabs/stream/components/Comment.css    | 22 +++++++++++++++++--
 client/coral-embed-stream/style/default.css   |  1 -
 .../client/components/SubscriberBadge.css     |  1 -
 postcss.config.js                             |  8 +++----
 4 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/client/coral-embed-stream/src/tabs/stream/components/Comment.css b/client/coral-embed-stream/src/tabs/stream/components/Comment.css
index f5bead3b8..d104b4731 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/Comment.css
+++ b/client/coral-embed-stream/src/tabs/stream/components/Comment.css
@@ -152,9 +152,27 @@
 }
 
 .header {
-  display: flex;
-  align-items: center;
   margin: 10px 0;
+  flex-direction: column;
+  align-items: flex-start;
+
+  > * {
+    margin: 3px 0;
+
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+
+  @media (min-width: 480px) {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+
+    > div {
+      margin: 0px 5px;
+    }
+  }
 }
 
 .content {
diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index 63f1edf67..451b27289 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -190,7 +190,6 @@ body {
   background-color: #4C1066;
   color: white;
   display: inline-block;
-  margin: 0px 5px;
   padding: 5px 5px;
   border-radius: 2px;
   font-size: 12px;
diff --git a/plugins/talk-plugin-subscriber/client/components/SubscriberBadge.css b/plugins/talk-plugin-subscriber/client/components/SubscriberBadge.css
index 42edfd8ff..e6c8d9161 100644
--- a/plugins/talk-plugin-subscriber/client/components/SubscriberBadge.css
+++ b/plugins/talk-plugin-subscriber/client/components/SubscriberBadge.css
@@ -2,7 +2,6 @@
   background-color: #616161;
   color: white;
   display: inline-block;
-  margin: 0px 5px;
   padding: 5px 5px;
   border-radius: 2px;
   font-size: 12px;
diff --git a/postcss.config.js b/postcss.config.js
index 79fae36cb..e76e674d2 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,7 +1,7 @@
 module.exports = {
   plugins: [
-    require('postcss-smart-import')({ /* ...options */ }),
-    require('precss')({ /* ...options */ }),
-    require('autoprefixer')({ /* ...options */ })
-  ]
+    require('postcss-smart-import'),
+    require('precss'),
+    require('autoprefixer'),
+  ],
 };

From 67a4d63a23b231da6ae821fb23a0475e1c2277da Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 1 Dec 2017 15:31:05 -0300
Subject: [PATCH 26/36] Good margin

---
 .../src/tabs/stream/components/Comment.css                | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/client/coral-embed-stream/src/tabs/stream/components/Comment.css b/client/coral-embed-stream/src/tabs/stream/components/Comment.css
index d104b4731..d1a118c77 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/Comment.css
+++ b/client/coral-embed-stream/src/tabs/stream/components/Comment.css
@@ -158,10 +158,6 @@
 
   > * {
     margin: 3px 0;
-
-    &:first-child {
-      margin-left: 0;
-    }
   }
 
   @media (min-width: 480px) {
@@ -169,8 +165,8 @@
     align-items: center;
     flex-direction: row;
 
-    > div {
-      margin: 0px 5px;
+    > * {
+      margin: 0 3px 0 0;
     }
   }
 }

From 7731ec42de6511c4b2655192b1d3dc3506f413df Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 1 Dec 2017 23:43:19 -0300
Subject: [PATCH 27/36] css tag label

---
 client/coral-embed-stream/style/default.css | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index 451b27289..154bfc868 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -190,10 +190,9 @@ body {
   background-color: #4C1066;
   color: white;
   display: inline-block;
-  padding: 5px 5px;
   border-radius: 2px;
   font-size: 12px;
-  font-weight: bold;
+  padding: 2px 6px;
 }
 
 /* Comment Action Styles */

From 6da4439b9421591375c15597f947ee4f7b7806bd Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Sat, 2 Dec 2017 00:20:59 -0300
Subject: [PATCH 28/36] Adding header container

---
 .../src/tabs/stream/components/Comment.css    | 10 +++-
 .../src/tabs/stream/components/Comment.js     | 60 ++++++++++---------
 2 files changed, 38 insertions(+), 32 deletions(-)

diff --git a/client/coral-embed-stream/src/tabs/stream/components/Comment.css b/client/coral-embed-stream/src/tabs/stream/components/Comment.css
index d1a118c77..8bdeeaaa4 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/Comment.css
+++ b/client/coral-embed-stream/src/tabs/stream/components/Comment.css
@@ -119,6 +119,8 @@
 
 .commentInfoBar {
   margin-left: auto;
+  flex: 1;
+  text-align: right;
 }
 
 @keyframes enter {
@@ -131,9 +133,6 @@
   animation: enter 1000ms;
 }
 
-.commentContainer {
-}
-
 .commentAvatar {
   max-width: 60px;
 }
@@ -153,6 +152,11 @@
 
 .header {
   margin: 10px 0;
+  display: flex;
+}
+
+.headerContainer {
+  flex: 1;
   flex-direction: column;
   align-items: flex-start;
 
diff --git a/client/coral-embed-stream/src/tabs/stream/components/Comment.js b/client/coral-embed-stream/src/tabs/stream/components/Comment.js
index 3da59afdc..d66bebd75 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/Comment.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/Comment.js
@@ -452,39 +452,41 @@ export default class Comment extends React.Component {
           <div className={cn(styles.commentContainer, 'talk-stream-comment-container')}>
             <div className={cn(styles.header, 'talk-stream-comment-header')}>
 
-              <Slot
-                className={cn(styles.username, 'talk-stream-comment-user-name')}
-                fill="commentAuthorName"
-                defaultComponent={CommentAuthorName}
-                queryData={queryData}
-                {...slotProps}
-              />
-
-              {isStaff(comment.tags) ? <TagLabel>Staff</TagLabel> : null}
-
-              <Slot
-                className={cn('talk-stream-comment-author-tags')}
-                fill="commentAuthorTags"
-                queryData={queryData}
-                {...slotProps}
-                inline
-              />
-
-              <span className={`${styles.bylineSecondary} talk-stream-comment-user-byline`} >
+              <div className={cn(styles.headerContainer, 'talk-stream-comment-header-container')}>
                 <Slot
-                  fill="commentTimestamp"
-                  defaultComponent={CommentTimestamp}
-                  className={'talk-stream-comment-published-date'}
-                  created_at={comment.created_at}
+                  className={cn(styles.username, 'talk-stream-comment-user-name')}
+                  fill="commentAuthorName"
+                  defaultComponent={CommentAuthorName}
                   queryData={queryData}
                   {...slotProps}
                 />
-                {
-                  (comment.editing && comment.editing.edited)
-                    ? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>
-                    : null
-                }
-              </span>
+
+                {isStaff(comment.tags) ? <TagLabel>Staff</TagLabel> : null}
+
+                <Slot
+                  className={cn('talk-stream-comment-author-tags')}
+                  fill="commentAuthorTags"
+                  queryData={queryData}
+                  {...slotProps}
+                  inline
+                />
+
+                <span className={`${styles.bylineSecondary} talk-stream-comment-user-byline`} >
+                  <Slot
+                    fill="commentTimestamp"
+                    defaultComponent={CommentTimestamp}
+                    className={'talk-stream-comment-published-date'}
+                    created_at={comment.created_at}
+                    queryData={queryData}
+                    {...slotProps}
+                  />
+                  {
+                    (comment.editing && comment.editing.edited)
+                      ? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>
+                      : null
+                  }
+                </span>
+              </div>
 
               <Slot
                 className={styles.commentInfoBar}

From 8b71175c4658df5c24fb95b59f83928698c1f540 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Mon, 4 Dec 2017 09:27:56 -0700
Subject: [PATCH 29/36] adjusted logic flow for comment flags

---
 graph/mutators/action.js | 107 ++++++++++++++++++++++++++++-----------
 1 file changed, 77 insertions(+), 30 deletions(-)

diff --git a/graph/mutators/action.js b/graph/mutators/action.js
index 93806ced9..1ef9014a8 100644
--- a/graph/mutators/action.js
+++ b/graph/mutators/action.js
@@ -1,28 +1,72 @@
-const ActionsService = require('../../services/actions');
-const UsersService = require('../../services/users');
 const errors = require('../../errors');
 const {CREATE_ACTION, DELETE_ACTION} = require('../../perms/constants');
 
+/**
+ * getActionItem will return the item that is associated with the given action.
+ * If it does not exist, it will throw an error.
+ *
+ * @param {Object} ctx    the graphql context for the request
+ * @param {Object} action the action being performed
+ * @return {Promise}      resolves to the referenced item
+ */
+const getActionItem = async (ctx, {item_id, item_type}) => {
+  const {
+    loaders: {
+      Comments,
+      Users,
+    },
+  } = ctx;
+
+  if (item_type === 'COMMENTS') {
+    const comment = await Comments.get.load(item_id);
+    if (!comment) {
+      throw errors.ErrNotFound;
+    }
+
+    return comment;
+  } else if (item_type === 'USERS') {
+    const user = await Users.getByID.load(item_id);
+    if (!user) {
+      throw errors.ErrNotFound;
+    }
+
+    return user;
+  }
+};
+
 /**
  * Creates an action on a item. If the item is a user flag, sets the user's status to
  * pending.
- * @param  {Object} user        the user performing the request
- * @param  {String} item_id     id of the item to add the action to
- * @param  {String} item_type   type of the item
- * @param  {String} action_type type of the action
- * @return {Promise}            resolves to the action created
+ *
+ * @param  {Object} ctx    the graphql context for the request
+ * @param  {Object} action the action being created
+ * @return {Promise}       resolves to the action created
  */
-const createAction = async ({user = {}, pubsub, loaders: {Comments}}, {item_id, item_type, action_type, group_id, metadata = {}}) => {
+const createAction = async (ctx, {item_id, item_type, action_type, group_id, metadata = {}}) => {
+  const {
+    user = {},
+    pubsub,
+    connectors: {
+      services: {
+        Actions,
+      },
+    },
+  } = ctx;
 
-  let comment;
-  if (item_type === 'COMMENTS') {
-    comment = await Comments.get.load(item_id);
-    if (!comment) {
-      throw new Error('Comment not found');
+  // Gets the item referenced by the action.
+  const item = await getActionItem(ctx, {item_id, item_type});
+
+  if (action_type === 'FLAG' && item_type === 'USERS') {
+
+    // The item is a user, and this is a flag. Check to see if they are staff,
+    // if they are, don't permit the flag.
+    if (item.isStaff()) {
+      throw errors.ErrNotAuthorized;
     }
   }
 
-  let action = await ActionsService.create({
+  // Create the action itself.
+  let action = await Actions.create({
     item_id,
     item_type,
     user_id: user.id,
@@ -31,17 +75,11 @@ const createAction = async ({user = {}, pubsub, loaders: {Comments}}, {item_id,
     metadata
   });
 
-  if (item_type === 'USERS' && action_type === 'FLAG') {
+  if (action_type === 'FLAG' && item_type === 'COMMENTS') {
 
-    // Set the user as pending if it was a user flag and user has no Admin, Staff or Moderation roles
-    let user = await UsersService.findById(item_id);
-    if(!user.isStaff()){
-      await UsersService.setStatus(item_id, 'PENDING');
-    }
-  }
-
-  if (comment) {
-    pubsub.publish('commentFlagged', comment);
+    // The item is a comment, and this is a flag. Push that the comment was
+    // flagged, don't wait for it to finish.
+    pubsub.publish('commentFlagged', item);
   }
 
   return action;
@@ -53,16 +91,25 @@ const createAction = async ({user = {}, pubsub, loaders: {Comments}}, {item_id,
  * @param  {String} id   the id of the action to delete
  * @return {Promise}     resolves to the deleted action, or null if not found.
  */
-const deleteAction = ({user}, {id}) => {
-  return ActionsService.delete({id, user_id: user.id});
+const deleteAction = (ctx, {id}) => {
+  const {
+    user,
+    connectors: {
+      services: {
+        Actions,
+      },
+    },
+  } = ctx;
+
+  return Actions.delete({id, user_id: user.id});
 };
 
-module.exports = (context) => {
-  if (context.user && context.user.can(CREATE_ACTION, DELETE_ACTION)) {
+module.exports = (ctx) => {
+  if (ctx.user && ctx.user.can(CREATE_ACTION, DELETE_ACTION)) {
     return {
       Action: {
-        create: (action) => createAction(context, action),
-        delete: (action) => deleteAction(context, action)
+        create: (action) => createAction(ctx, action),
+        delete: (action) => deleteAction(ctx, action)
       }
     };
   }

From fdf11fa2778e4d683b58d4e09702a0144de42ac1 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 4 Dec 2017 13:42:22 -0300
Subject: [PATCH 30/36] Adding extra container and styling

---
 .../src/tabs/stream/components/Comment.css     | 18 +++++++++++-------
 .../src/tabs/stream/components/Comment.js      | 18 ++++++++++--------
 client/coral-embed-stream/style/default.css    |  2 +-
 3 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/client/coral-embed-stream/src/tabs/stream/components/Comment.css b/client/coral-embed-stream/src/tabs/stream/components/Comment.css
index 8bdeeaaa4..15d42bef0 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/Comment.css
+++ b/client/coral-embed-stream/src/tabs/stream/components/Comment.css
@@ -160,18 +160,22 @@
   flex-direction: column;
   align-items: flex-start;
 
-  > * {
-    margin: 3px 0;
-  }
-
   @media (min-width: 480px) {
     display: flex;
     align-items: center;
     flex-direction: row;
+  }
+}
 
-    > * {
-      margin: 0 3px 0 0;
-    }
+.tagsContainer {
+  display: flex;
+}
+
+.tagsContainer > * {
+  margin: 3px;
+
+  &:first-child {
+    margin-left: 0px;
   }
 }
 
diff --git a/client/coral-embed-stream/src/tabs/stream/components/Comment.js b/client/coral-embed-stream/src/tabs/stream/components/Comment.js
index d66bebd75..ba14e3c7f 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/Comment.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/Comment.js
@@ -461,15 +461,17 @@ export default class Comment extends React.Component {
                   {...slotProps}
                 />
 
-                {isStaff(comment.tags) ? <TagLabel>Staff</TagLabel> : null}
+                <div className={cn(styles.tagsContainer, 'talk-stream-comment-header-tags-container')}>
+                  {isStaff(comment.tags) ? <TagLabel>Staff</TagLabel> : null}
 
-                <Slot
-                  className={cn('talk-stream-comment-author-tags')}
-                  fill="commentAuthorTags"
-                  queryData={queryData}
-                  {...slotProps}
-                  inline
-                />
+                  <Slot
+                    className={cn(styles.commentAuthorTagsSlot, 'talk-stream-comment-author-tags')}
+                    fill="commentAuthorTags"
+                    queryData={queryData}
+                    {...slotProps}
+                    inline
+                  />
+                </div>
 
                 <span className={`${styles.bylineSecondary} talk-stream-comment-user-byline`} >
                   <Slot
diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index 154bfc868..a04ee6f05 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -192,7 +192,7 @@ body {
   display: inline-block;
   border-radius: 2px;
   font-size: 12px;
-  padding: 2px 6px;
+  padding: 5px 6px;
 }
 
 /* Comment Action Styles */

From 0640be2a7739dc192d35ce209f81fe26cc01ef17 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 4 Dec 2017 15:00:43 -0300
Subject: [PATCH 31/36] Timestamp no break

---
 client/coral-framework/components/CommentTimestamp.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/coral-framework/components/CommentTimestamp.css b/client/coral-framework/components/CommentTimestamp.css
index a4620902c..0c54019ff 100644
--- a/client/coral-framework/components/CommentTimestamp.css
+++ b/client/coral-framework/components/CommentTimestamp.css
@@ -2,5 +2,6 @@
   display: inline-block;
   color: #696969;
   font-size: 12px;
+  white-space: nowrap;
 }
 

From 87ef0f1cb9d235c9db610ea5c93eacd706c3b3a4 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Mon, 4 Dec 2017 12:17:39 -0700
Subject: [PATCH 32/36] Adjusted flag beheviour for staff

---
 config.js                                   |  7 +++++-
 docs/_docs/02-02-advanced-configuration.md  |  5 ++++
 graph/mutators/action.js                    | 17 ++++++++++----
 graph/mutators/comment.js                   | 16 ++++++++++---
 plugin-api/beta/server/getReactionConfig.js | 26 +++++++++++----------
 5 files changed, 50 insertions(+), 21 deletions(-)

diff --git a/config.js b/config.js
index 4601683c1..3e167b294 100644
--- a/config.js
+++ b/config.js
@@ -175,7 +175,12 @@ const CONFIG = {
   DISABLE_AUTOFLAG_SUSPECT_WORDS: process.env.TALK_DISABLE_AUTOFLAG_SUSPECT_WORDS === 'TRUE',
 
   // TRUST_THRESHOLDS defines the thresholds used for automoderation.
-  TRUST_THRESHOLDS: process.env.TRUST_THRESHOLDS || 'comment:2,-1;flag:2,-1'
+  TRUST_THRESHOLDS: process.env.TRUST_THRESHOLDS || 'comment:2,-1;flag:2,-1',
+
+  // IGNORE_FLAGS_AGAINST_STAFF disables staff members from entering the
+  // reported queue from comments after this was enabled and from reports
+  // against the staff members user account.
+  IGNORE_FLAGS_AGAINST_STAFF: process.env.TALK_DISABLE_IGNORE_FLAGS_AGAINST_STAFF === 'TRUE',
 };
 
 //==============================================================================
diff --git a/docs/_docs/02-02-advanced-configuration.md b/docs/_docs/02-02-advanced-configuration.md
index 74099258d..94a6b402d 100644
--- a/docs/_docs/02-02-advanced-configuration.md
+++ b/docs/_docs/02-02-advanced-configuration.md
@@ -456,3 +456,8 @@ Could be read as:
   added back to the queue.
 - At the moment of writing, behavior is not attached to the flagging
   reliability, but it is recorded.
+
+## TALK_DISABLE_IGNORE_FLAGS_AGAINST_STAFF
+
+When `TRUE`, staff members will have their accounts and comments moderated the
+same as any other user in the system. (Default `FALSE`)
\ No newline at end of file
diff --git a/graph/mutators/action.js b/graph/mutators/action.js
index 1ef9014a8..29a6e67af 100644
--- a/graph/mutators/action.js
+++ b/graph/mutators/action.js
@@ -1,5 +1,8 @@
 const errors = require('../../errors');
 const {CREATE_ACTION, DELETE_ACTION} = require('../../perms/constants');
+const {
+  IGNORE_FLAGS_AGAINST_STAFF,
+} = require('../../config');
 
 /**
  * getActionItem will return the item that is associated with the given action.
@@ -56,12 +59,16 @@ const createAction = async (ctx, {item_id, item_type, action_type, group_id, met
   // Gets the item referenced by the action.
   const item = await getActionItem(ctx, {item_id, item_type});
 
-  if (action_type === 'FLAG' && item_type === 'USERS') {
+  // If we are ignoring flags against staff, ensure that the target isn't a
+  // staff member.
+  if (IGNORE_FLAGS_AGAINST_STAFF) {
+    if (action_type === 'FLAG') {
 
-    // The item is a user, and this is a flag. Check to see if they are staff,
-    // if they are, don't permit the flag.
-    if (item.isStaff()) {
-      throw errors.ErrNotAuthorized;
+      // If the item is a user, and this is a flag. Check to see if they are
+      // staff, if they are, don't permit the flag.
+      if (item_type === 'USERS' && item.isStaff()) {
+        return null;
+      }
     }
   }
 
diff --git a/graph/mutators/comment.js b/graph/mutators/comment.js
index de3345257..bd8ab18fd 100644
--- a/graph/mutators/comment.js
+++ b/graph/mutators/comment.js
@@ -19,7 +19,8 @@ const {
 } = require('../../perms/constants');
 
 const {
-  DISABLE_AUTOFLAG_SUSPECT_WORDS
+  DISABLE_AUTOFLAG_SUSPECT_WORDS,
+  IGNORE_FLAGS_AGAINST_STAFF,
 } = require('../../config');
 
 const debug = require('debug')('talk:graph:mutators:tags');
@@ -292,7 +293,7 @@ const moderationPhases = [
     }
   },
 
-  // This phase checks to see if the comment's length exeeds maximum.
+  // This phase checks to see if the comment's length exceeds maximum.
   (context, comment, {assetSettings: {charCountEnable, charCount}}) => {
 
     // Reject if the comment is too long
@@ -313,6 +314,15 @@ const moderationPhases = [
     }
   },
 
+  // If a given user is a staff member, always approve their comment.
+  (context) => {
+    if (IGNORE_FLAGS_AGAINST_STAFF && context.user && context.user.isStaff()) {
+      return {
+        status: 'ACCEPTED',
+      };
+    }
+  },
+
   // This phase checks the comment if it has any links in it if the check is
   // enabled.
   (context, comment, {assetSettings: {premodLinksEnable}}) => {
@@ -362,7 +372,7 @@ const moderationPhases = [
     }
   },
 
-  // This phase checks to see if the comment was already perscribed a status.
+  // This phase checks to see if the comment was already prescribed a status.
   (context, comment) => {
 
     // If the status was already defined, don't redefine it. It's only defined
diff --git a/plugin-api/beta/server/getReactionConfig.js b/plugin-api/beta/server/getReactionConfig.js
index 481990c16..2fffb4d1c 100644
--- a/plugin-api/beta/server/getReactionConfig.js
+++ b/plugin-api/beta/server/getReactionConfig.js
@@ -157,10 +157,22 @@ function getReactionConfig(reaction) {
       RootMutation: {
         [`create${Reaction}Action`]: async (_, {input: {item_id}}, {mutators: {Action}, pubsub, loaders: {Comments}}) => {
           const comment = await Comments.get.load(item_id);
+          if (!comment) {
+            throw errors.ErrNotFound;
+          }
 
-          let action;
           try {
-            action = await Action.create({item_id, item_type: 'COMMENTS', action_type: REACTION});
+            const action = await Action.create({item_id, item_type: 'COMMENTS', action_type: REACTION});
+
+            if (pubsub) {
+
+              // The comment is needed to allow better filtering e.g. by asset_id.
+              pubsub.publish(`${reaction}ActionCreated`, {action, comment});
+            }
+
+            return {
+              [reaction]: action,
+            };
           } catch (err) {
             if (err instanceof errors.ErrAlreadyExists) {
               return err.metadata.existing;
@@ -168,16 +180,6 @@ function getReactionConfig(reaction) {
 
             throw err;
           }
-
-          if (pubsub) {
-
-            // The comment is needed to allow better filtering e.g. by asset_id.
-            pubsub.publish(`${reaction}ActionCreated`, {action, comment});
-          }
-
-          return {
-            [reaction]: action,
-          };
         },
         [`delete${Reaction}Action`]: async (_, {input: {id}}, {mutators: {Action}, pubsub, loaders: {Comments}})  => {
           const action = await Action.delete({id});

From 3b4e69f06e9d84be53c08c96c09107b5646537d1 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Mon, 4 Dec 2017 14:06:32 -0700
Subject: [PATCH 33/36] fixed based on e2e finding a bug!

---
 graph/mutators/action.js | 15 +++++++++++----
 services/users.js        | 40 ++++++++++++++++++++++++++++------------
 2 files changed, 39 insertions(+), 16 deletions(-)

diff --git a/graph/mutators/action.js b/graph/mutators/action.js
index 29a6e67af..06417844b 100644
--- a/graph/mutators/action.js
+++ b/graph/mutators/action.js
@@ -1,4 +1,5 @@
 const errors = require('../../errors');
+const UsersService = require('../../services/users');
 const {CREATE_ACTION, DELETE_ACTION} = require('../../perms/constants');
 const {
   IGNORE_FLAGS_AGAINST_STAFF,
@@ -82,11 +83,17 @@ const createAction = async (ctx, {item_id, item_type, action_type, group_id, met
     metadata
   });
 
-  if (action_type === 'FLAG' && item_type === 'COMMENTS') {
+  if (action_type === 'FLAG') {
+    if (item_type === 'USERS') {
 
-    // The item is a comment, and this is a flag. Push that the comment was
-    // flagged, don't wait for it to finish.
-    pubsub.publish('commentFlagged', item);
+      // Set the user's status as pending, as we need to review it.
+      await UsersService.setStatus(item_id, 'PENDING');
+    } else if (item_type === 'COMMENTS') {
+
+      // The item is a comment, and this is a flag. Push that the comment was
+      // flagged, don't wait for it to finish.
+      pubsub.publish('commentFlagged', item);
+    }
   }
 
   return action;
diff --git a/services/users.js b/services/users.js
index e0f7d1599..fbaf89609 100644
--- a/services/users.js
+++ b/services/users.js
@@ -395,18 +395,34 @@ module.exports = class UsersService {
       throw new Error(`status ${status} is not supported`);
     }
 
-    // TODO: current updating status behavior is weird.
-    // once a user has been `APPROVED` its status cannot be
-    // changed anymore.
-    const user = await UserModel.findOneAndUpdate({
-      id,
-      status: {
-        $ne: 'APPROVED'
-      }
-    }, {
+    // Compose the query.
+    const query = {id};
+
+    // Insert extra validations into the query.
+    switch (status) {
+    case 'ACTIVE':
+    case 'BANNED':
+    case 'APPROVED':
+
+      // A user cannot become change their status from what it is already.
+      query.status = {
+        $ne: status,
+      };
+      break;
+    case 'PENDING':
+
+      // A user cannot become pending if they are already approved, pending, or
+      // banned
+      query.status = {
+        $nin: [status, 'APPROVED', 'BANNED'],
+      };
+      break;
+    }
+
+    const user = await UserModel.findOneAndUpdate(query, {
       $set: {
-        status
-      }
+        status,
+      },
     }, {
       new: true,
     });
@@ -426,8 +442,8 @@ module.exports = class UsersService {
           };
         await MailerService.sendSimple(options);
       }
-
     }
+
     return user;
   }
 

From 2061a7b97d7538d9c4a378784030c55b7baf3cc5 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 4 Dec 2017 22:21:40 +0100
Subject: [PATCH 34/36] Use @coralproject/graphql-anywhere-optimized

---
 package.json      | 2 +-
 webpack.config.js | 2 +-
 yarn.lock         | 8 ++++----
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 9cdc2a03d..5ac69b6e6 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
   },
   "homepage": "https://github.com/coralproject/talk#readme",
   "dependencies": {
+    "@coralproject/graphql-anywhere-optimized": "^0.1.0",
     "accepts": "^1.3.4",
     "apollo-client": "^1.9.1",
     "apollo-utilities": "^1.0.3",
@@ -106,7 +107,6 @@
     "fs-extra": "^4.0.1",
     "gql-merge": "^0.0.4",
     "graphql": "^0.9.1",
-    "graphql-anywhere-optimized": "git+https://git@github.com/cvle/graphql-anywhere#optimized",
     "graphql-docs": "0.2.0",
     "graphql-errors": "^2.1.0",
     "graphql-redis-subscriptions": "1.3.0",
diff --git a/webpack.config.js b/webpack.config.js
index 8e510a3f0..60a49b6eb 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -120,7 +120,7 @@ const config = {
   },
   resolve: {
     alias: {
-      'graphql-anywhere': 'graphql-anywhere-optimized',
+      'graphql-anywhere': '@coralproject/graphql-anywhere-optimized',
       'plugin-api': path.resolve(__dirname, 'plugin-api/'),
       plugins: path.resolve(__dirname, 'plugins/'),
       pluginsConfig: pluginsPath
diff --git a/yarn.lock b/yarn.lock
index 25de6dd3a..78ded3707 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11,6 +11,10 @@
     eslint-plugin-promise "^3.3.1"
     eslint-plugin-react "^7.3.0"
 
+"@coralproject/graphql-anywhere-optimized@^0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@coralproject/graphql-anywhere-optimized/-/graphql-anywhere-optimized-0.1.0.tgz#3456f16f790d8593b0ca4355910578ab1c6edab5"
+
 "@kadira/storybook-deployer@^1.1.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@kadira/storybook-deployer/-/storybook-deployer-1.2.0.tgz#1708f5cb37fa08ab4173b1bd99df6f4717dfae12"
@@ -3511,10 +3515,6 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.4, graceful-fs@^4.1.6:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
 
-"graphql-anywhere-optimized@git+https://git@github.com/cvle/graphql-anywhere#optimized":
-  version "3.1.0"
-  resolved "git+https://git@github.com/cvle/graphql-anywhere#3f5d9e5c619ac4c4065af83abd7f76b84fb81e7c"
-
 graphql-anywhere@^3.0.1:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/graphql-anywhere/-/graphql-anywhere-3.1.0.tgz#3ea0d8e8646b5cee68035016a9a7557c15c21e96"

From 0d91396b1ced03b9b8cbe149760c47cb7d45e0b0 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 4 Dec 2017 22:45:23 +0100
Subject: [PATCH 35/36] Remove death star button

---
 .../src/tabs/stream/components/Stream.js      | 25 +------------------
 1 file changed, 1 insertion(+), 24 deletions(-)

diff --git a/client/coral-embed-stream/src/tabs/stream/components/Stream.js b/client/coral-embed-stream/src/tabs/stream/components/Stream.js
index 2bd131cb0..e37b91ba6 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/Stream.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/Stream.js
@@ -13,7 +13,7 @@ import t, {timeago} from 'coral-framework/services/i18n';
 import CommentBox from 'talk-plugin-commentbox/CommentBox';
 import QuestionBox from '../../../components/QuestionBox';
 import {isCommentActive} from 'coral-framework/utils';
-import {Tab, TabCount, TabPane, Button} from 'coral-ui';
+import {Tab, TabCount, TabPane} from 'coral-ui';
 import cn from 'classnames';
 
 import {getTopLevelParent, attachCommentToParent} from '../../../graphql/utils';
@@ -207,23 +207,6 @@ class Stream extends React.Component {
     );
   }
 
-  launchDeathStar = () => {
-    let i = 100;
-    const launch = () => {
-      setTimeout(() => {
-        this.props.postComment({
-          asset_id: this.props.asset.id,
-          body: 'death is certain',
-        });
-        i--;
-        if (i > 0) {
-          launch();
-        }
-      }, 100);
-    };
-    launch();
-  }
-
   render() {
     const {
       data,
@@ -262,12 +245,6 @@ class Stream extends React.Component {
 
     return (
       <div id="stream" className={styles.root}>
-        <Button
-          cStyle="darkGrey"
-          onClick={this.launchDeathStar}
-        >
-          Launch Death Star
-        </Button>
         {open
           ? <div id="commentBox">
             <InfoBox

From a79dd76f4b4449b54a70c8c37d3c459850c22cec Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 4 Dec 2017 22:46:33 +0100
Subject: [PATCH 36/36] Use graphql document optimizations only in production

---
 client/coral-framework/services/bootstrap.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/coral-framework/services/bootstrap.js b/client/coral-framework/services/bootstrap.js
index 5e6173355..3ef6629c1 100644
--- a/client/coral-framework/services/bootstrap.js
+++ b/client/coral-framework/services/bootstrap.js
@@ -126,7 +126,7 @@ export async function createContext({
     createGraphQLRegistry(plugins.getSlotFragments.bind(plugins)),
     {
       introspectionData,
-      optimize: true,
+      optimize: process.env.NODE_ENV === 'production',
     },
   );
   if (!notification) {