When the currently focused group is changed in the groups dropdown,
change the display (annotations in the sidebar, numbers in the bucket
bar, highlights in the document) to show only the annotations from the
newly-focused group.

h/static/scripts/annotation-mapper.js

@@ -19,11 +19,25 @@ function getContainer(threading, annotation) {
// Wraps the annotation store to trigger events for the CRUD actions
// @ngInject
function annotationMapper($rootScope, threading, store, groups) {

  // All of the annotations that annotationMapper has received from calls to
  // its loadAnnotations() method.
  var received = [];

  // The annotations that are currently loaded into the page context.
  var loaded = [];

  function loadAnnotations(annotations) {
    var loaded = [];
    received = received.concat(annotations);
    loadAnnotationsFromGroup(annotations, groups.focused().id);
  }

    annotations.forEach(function (annotation) {
      if (annotation.group !== groups.focused().id) {
  function loadAnnotationsFromGroup(annotations, groupId) {
    // The annotations that we've added to the page.
    var newlyLoaded = [];

    annotations.forEach(function(annotation) {
      if (annotation.group !== groupId) {
        return;
      }

@@ -34,21 +48,32 @@ function annotationMapper($rootScope, threading, store, groups) {
        return;
      }

      loaded.push(new store.AnnotationResource(annotation));
      newlyLoaded.push(new store.AnnotationResource(annotation));
    });

    $rootScope.$emit('annotationsLoaded', loaded);
    $rootScope.$emit('annotationsLoaded', newlyLoaded);
    loaded = loaded.concat(newlyLoaded);
  }

  // When the focused group changes, change what annotations are shown.
  $rootScope.$on('groupFocused', function() {
    unloadAnnotations(loaded);
    loadAnnotationsFromGroup(received, groups.focused().id);
  });

  function unloadAnnotations(annotations) {
    annotations.forEach(function (annotation) {
    annotations.forEach(function(annotation) {
      var container = getContainer(threading, annotation);
      if (container !== null && annotation !== container.message) {
        annotation = angular.copy(annotation, container.message);
      }

      $rootScope.$emit('annotationDeleted', annotation);
    });

    annotations.slice().forEach(function(annotation) {
      loaded.splice(loaded.indexOf(annotation, 1));
    });
  }

  function createAnnotation(annotation) {

h/static/scripts/groups.js

@@ -10,7 +10,7 @@
var STORAGE_KEY = 'hypothesis.groups.focus';

// @ngInject
function groups(localStorage, session) {
function groups(localStorage, session, $rootScope) {
  // The currently focused group. This is the group that's shown as selected in
  // the groups dropdown, the annotations displayed are filtered to only ones
  // that belong to this group, and any new annotations that the user creates
@@ -56,6 +56,7 @@ function groups(localStorage, session) {
      if (typeof g !== 'undefined') {
        focused = g;
        localStorage.setItem(STORAGE_KEY, g.id);
        $rootScope.$emit('groupFocused', g.id);
      }
    }
  };