Add focused user mode for speed grader

src/sidebar/components/focused-mode-header.js

+'use strict';
+
+const { createElement } = require('preact');
+const propTypes = require('prop-types');
+
+const { withServices } = require('../util/service-context');
+
+function FocusedModeHeader({ settings }) {
+
+  return (
+    <div className="focused-mode-header">
+      Showing annotations by{' '}
+      <span className="focused-mode-header__user">{settings.focusedUser}</span>
+    </div>
+  );
+}
+FocusedModeHeader.propTypes = {
+  // Injected services.
+  settings: propTypes.object.isRequired,
+};
+
+FocusedModeHeader.injectedProps = ['settings'];
+
+module.exports = withServices(FocusedModeHeader);

src/sidebar/components/sidebar-content.js

@@ -125,6 +125,10 @@ function SidebarContentController(
     true
   );
 
+  this.showFocusedHeader = () => {
+    return store.getState().focusedMode;
+  };
+
   this.showSelectedTabs = function() {
     if (
       this.selectedAnnotationUnavailable() ||
@@ -132,8 +136,11 @@ function SidebarContentController(
       store.getState().filterQuery
     ) {
       return false;
-    }
+    } else if (store.getState().focusedMode) {
+      return false;
+    } else {
       return true;
+    }
   };
 
   this.setCollapsed = function(id, collapsed) {

src/sidebar/host-config.js

@@ -10,6 +10,9 @@ function hostPageConfig(window) {
   const configJSON = queryString.parse(window.location.search).config;
   const config = JSON.parse(configJSON || '{}');
 
+  // temp: hack to force user
+  config.focusedUser = 'kyle';
+
   // Known configuration parameters which we will import from the host page.
   // Note that since the host page is untrusted code, the filtering needs to
   // be done here.
@@ -38,6 +41,9 @@ function hostPageConfig(window) {
     // This should be removed once new note button is enabled for everybody.
     'enableExperimentalNewNoteButton',
 
+    // Forces the sidebar to filter annotations to a single user.
+    'focusedUser',
+
     // Fetch config from a parent frame.
     'requestConfigFromFrame',
 

src/sidebar/index.js

@@ -180,6 +180,10 @@ function startAngularApp(config) {
       'searchStatusBar',
       wrapReactComponent(require('./components/search-status-bar'))
     )
+    .component(
+      'focusedModeHeader',
+      wrapReactComponent(require('./components/focused-mode-header'))
+    )
     .component(
       'selectionTabs',
       wrapReactComponent(require('./components/selection-tabs'))

src/sidebar/services/root-thread.js

@@ -39,7 +39,7 @@ const sortFns = {
  * The root thread is then displayed by viewer.html
  */
 // @ngInject
-function RootThread($rootScope, store, searchFilter, viewFilter) {
+function RootThread($rootScope, settings, store, searchFilter, viewFilter) {
   /**
    * Build the root conversation thread from the given UI state.
    *
@@ -50,15 +50,19 @@ function RootThread($rootScope, store, searchFilter, viewFilter) {
     const sortFn = sortFns[state.sortKey];
 
     let filterFn;
-    if (state.filterQuery) {
-      const filters = searchFilter.generateFacetedFilter(state.filterQuery);
+    if (state.filterQuery || state.focusedMode) {
+      const filters = searchFilter.generateFacetedFilter(
+        state.filterQuery,
+        settings.focusedUser
+      );
       filterFn = function(annot) {
         return viewFilter.filter([annot], filters).length > 0;
       };
     }
 
     let threadFilterFn;
-    if (state.isSidebar && !state.filterQuery) {
+    const hasFilters = state.filterQuery || state.focusedMode;
+    if (state.isSidebar && !hasFilters) {
       threadFilterFn = function(thread) {
         if (!thread.annotation) {
           return false;

src/sidebar/services/search-filter.js

@@ -129,7 +129,7 @@ function toObject(searchtext) {
  * @param {string} searchtext
  * @return {Object}
  */
-function generateFacetedFilter(searchtext) {
+function generateFacetedFilter(searchtext, focusedUser) {
   let terms;
   const any = [];
   const quote = [];
@@ -138,7 +138,7 @@ function generateFacetedFilter(searchtext) {
   const tag = [];
   const text = [];
   const uri = [];
-  const user = [];
+  const user = focusedUser ? [focusedUser] : [];
 
   if (searchtext) {
     terms = tokenize(searchtext);

src/sidebar/store/modules/selection.js

@@ -113,6 +113,8 @@ function init(settings) {
 
     selectedTab: TAB_DEFAULT,
 
+    focusedMode: !!settings.focusedUser,
+
     // Key by which annotations are currently sorted.
     sortKey: TAB_SORTKEY_DEFAULT[TAB_DEFAULT],
     // Keys by which annotations can be sorted.

src/sidebar/templates/sidebar-content.html

+<focused-mode-header
+  ng-if="vm.showFocusedHeader()">
+</focused-mode-header>
+
 <selection-tabs
   ng-if="vm.showSelectedTabs()"
   is-loading="vm.isLoading()">

src/styles/sidebar/components/focused-mode-header.scss

+.focused-mode-header {
+  padding: 5px;
+  .focused-mode-header__user {
+    font-weight: 800;
+  }
+}

src/styles/sidebar/sidebar.scss

@@ -27,6 +27,7 @@ $base-line-height: 20px;
 @import './components/annotation-thread';
 @import './components/annotation-user';
 @import './components/excerpt';
+@import './components/focused-mode-header';
 @import './components/group-list';
 @import './components/group-list-item';
 @import './components/help-panel';