Feature/explorer routing

frontend/package.json

@@ -15,6 +15,7 @@
     "async": "^3.1.0",
     "backbone": "^1.4.0",
     "backbone-fractal": "^1.1.0",
+    "backbone-machina": "^1.1.0",
     "backbone.radio": "^2.0.0",
     "bulma": "^0.7.1",
     "bulma-accordion": "^2.0.1",
@@ -28,7 +29,6 @@
     "js-cookie": "^2.2.0",
     "jsonld": "^1.5.1",
     "lodash": "^4.17.10",
-    "machina": "^2.0.2",
     "rangy": "^1.3.0",
     "rdf-parse": "^1.1.1",
     "streamify-string": "^1.0.1"

frontend/src/annotation/panel-annotation-edit-view-test.ts

@@ -36,7 +36,6 @@ describe('AnnotationEditView', function() {
             range,
             positionDetails: this.positionDetails,
             source: new Node({'@id': 'x'}),
-            ontology: new Graph(),
             model: undefined,
         })).not.toThrow();
     });
@@ -46,10 +45,7 @@ describe('AnnotationEditView', function() {
         const annotation = items.get(item('100'));
         const creator = annotation.get(dcterms.creator)[0] as Node;
         ldChannel.reply('current-user-uri', constant(creator.id));
-        const view = new AnnotationEditView({
-            ontology: new Graph(),
-            model: annotation,
-        }).render();
+        const view = new AnnotationEditView({ model: annotation }).render();
         expect(view.$('.panel-footer button.is-danger').length).toBe(1);
         view.remove();
         ldChannel.stopReplying('current-user-uri');
@@ -59,10 +55,7 @@ describe('AnnotationEditView', function() {
         const items = new Graph(mockItems);
         const annotation = items.get(item('100'));
         const creator = annotation.get(dcterms.creator)[0] as Node;
-        const view = new AnnotationEditView({
-            ontology: new Graph(),
-            model: annotation,
-        }).render();
+        const view = new AnnotationEditView({ model: annotation }).render();
         expect(view.$('.panel-footer button.is-danger').length).toBe(0);
         view.remove();
     });

frontend/src/annotation/panel-annotation-edit-view.ts

@@ -9,11 +9,12 @@ import Graph from '../jsonld/graph';
 
 import ItemEditor from '../panel-ld-item/ld-item-edit-view';
 import PickerView from '../forms/base-picker-view';
+import FilteredCollection from '../utilities/filtered-collection';
 import ItemGraph from '../utilities/item-graph';
 import ClassPickerView from '../utilities/ontology-class-picker/ontology-class-picker-view';
 import ItemMetadataView from '../utilities/item-metadata/item-metadata-view';
 import SnippetView from '../utilities/snippet-view/snippet-view';
-import { isType } from '../utilities/utilities';
+import { isRdfsClass, isType } from '../utilities/utilities';
 import {
     AnnotationPositionDetails,
     getTargetDetails
@@ -22,20 +23,30 @@ import {
     composeAnnotation,
     getAnonymousTextQuoteSelector
 } from './../utilities/annotation/annotation-creation-utilities';
+import explorerChannel from '../explorer/radio';
+import { announceRoute } from '../explorer/utilities';
 
 import BaseAnnotationView from './base-annotation-view';
 import FlatCollection from './flat-annotation-collection';
 
 import annotationEditTemplate from './panel-annotation-edit-template';
 
+/**
+ * Helper function in order to pass the right classes to the classPicker.
+ */
+function getOntologyClasses() {
+    const ontology = ldChannel.request('ontology:graph') || new Graph();
+    return new FilteredCollection<Node, Graph>(ontology, isRdfsClass);
+}
+
+const announce = announceRoute('item:edit', ['model', 'id']);
 
 export interface ViewOptions extends BaseOpt<Model> {
     /**
      * An instance of oa:Annotation that links to a oa:TextQuoteSelector,
      * can be undefined if range and positionDetails are set (i.e. in case of a new annotation)
      */
     model: Node;
-    ontology: Graph;
     collection?: FlatCollection;
 
     /**
@@ -56,7 +67,6 @@ export interface ViewOptions extends BaseOpt<Model> {
 
 export default class AnnotationEditView extends BaseAnnotationView {
     collection: FlatCollection;
-    ontology: Graph;
     source: Node;
     range: Range;
     positionDetails: AnnotationPositionDetails;
@@ -77,7 +87,6 @@ export default class AnnotationEditView extends BaseAnnotationView {
     }
 
     initialize(options: ViewOptions): this {
-        this.ontology = options.ontology;
         this.itemOptions = new ItemGraph();
         this.itemPicker = new PickerView({collection: this.itemOptions});
         this.itemPicker.on('change', this.selectItem, this);
@@ -97,6 +106,7 @@ export default class AnnotationEditView extends BaseAnnotationView {
             this.listenTo(this, 'textQuoteSelector', this.processTextQuoteSelector);
             this.processModel(options.model);
             this.listenTo(this.model, 'change', this.processModel);
+            this.on('announceRoute', announce);
         }
         else {
             this.processTextQuoteSelector(this.model);
@@ -144,7 +154,7 @@ export default class AnnotationEditView extends BaseAnnotationView {
 
     initClassPicker(): this {
         this.classPicker = new ClassPickerView({
-            collection: this.ontology,
+            collection: getOntologyClasses(),
             preselection: this.preselection
         });
 
@@ -224,15 +234,15 @@ export default class AnnotationEditView extends BaseAnnotationView {
                 const anno = results.annotation;
                 this.collection.underlying.add(anno);
                 const flat = this.collection.get(anno.id);
-                this.trigger('annotationEditView:saveNew', this, flat, results.items);
+                explorerChannel.trigger('annotationEditView:saveNew', this, flat, results.items);
             }
         );
     }
 
     submitOldAnnotation(newItem: boolean): void {
         this.selectedItem && this.model.set(oa.hasBody, this.selectedItem);
         this.model.save();
-        this.trigger('annotationEditView:save', this, this.model, newItem);
+        explorerChannel.trigger('annotationEditView:save', this, this.model, newItem);
     }
 
     reset(): this {
@@ -289,7 +299,7 @@ export default class AnnotationEditView extends BaseAnnotationView {
     onCancelClicked(event: JQueryEventObject): this {
         event.preventDefault();
         this.reset();
-        this.trigger('annotationEditView:close', this);
+        explorerChannel.trigger('annotationEditView:close', this);
         return this;
     }
 

frontend/src/annotation/panel-annotation-list-view.ts

@@ -4,11 +4,15 @@ import { CollectionView } from '../core/view';
 import { getScrollTop, animatedScroll, ScrollType } from './../utilities/scrolling-utilities';
 import ItemSummaryBlock from '../utilities/item-summary-block/item-summary-block-view';
 import LoadingSpinnerView from '../utilities/loading-spinner/loading-spinner-view';
+import explorerChannel from '../explorer/radio';
+import { announceRoute } from '../explorer/utilities';
 
 import FlatModel from './flat-annotation-model';
 import FlatCollection from './flat-annotation-collection';
 import annotationsTemplate from './panel-annotation-list-template';
 
+const announce = announceRoute('source:annotated', ['model', 'id']);
+
 /**
  * Explorer panel that displays a list of annotations as ItemSummaryBlocks.
  *
@@ -41,7 +45,7 @@ export default class AnnotationListView extends CollectionView<FlatModel, ItemSu
             remove: this.removeItem,
             sort: this.placeItems,
             reset: this.resetItems,
-        });
+        }).on('announceRoute', announce);
     }
 
     _hideLoadingSpinner(): void {
@@ -52,12 +56,12 @@ export default class AnnotationListView extends CollectionView<FlatModel, ItemSu
 
     _handleFocus(model: FlatModel): void {
         this.scrollTo(model);
-        this.trigger('annotationList:showAnnotation', this, model);
+        explorerChannel.trigger('annotationList:showAnnotation', this, model);
     }
 
     _handleBlur(lostFocus: FlatModel, gainedFocus?: FlatModel): void {
         if (!gainedFocus) {
-            this.trigger('annotationList:hideAnnotation', this, lostFocus);
+            explorerChannel.trigger('annotationList:hideAnnotation', this, lostFocus);
         }
     }
 

frontend/src/aspects/authentication.ts

@@ -2,7 +2,6 @@ import user from '../global/user';
 import userFsm from '../global/user-fsm';
 import authFsm from '../global/authentication-fsm';
 import loginForm from '../global/login-view';
-import registrationForm from '../global/registration-view';
 import menuView from '../global/menu-view';
 
 
@@ -52,9 +51,6 @@ user.on('login:error', () => {
 
 });
 user.on('logout:success', () => authFsm.handle('logout'));
-user.on('registration:success', () => registrationForm.success());
-user.on('registration:error', (response) => registrationForm.error(response));
-user.on('registration:invalid', (errors) => registrationForm.invalid(errors));
 
 // When authorization fails, just return to the last unprivileged state.
 userFsm.on('enter:authorizationDenied', () => {
@@ -74,21 +70,11 @@ userFsm.on('enter:requestAuthorization', (fsm, action) => {
     authFsm.handle('login');
 });
 
-userFsm.on('enter:registering', () => {
-    authFsm.handle('register');
-});
-
 authFsm.on('enter:unauthenticated', () => userFsm.handle('denied'));
 authFsm.on('enter:attemptLogin', () => loginForm.render().$el.appendTo('body'));
 authFsm.on('exit:attemptLogin', () => loginForm.$el.detach());
 authFsm.on('enter:authenticated', () => userFsm.handle('granted'));
 authFsm.on('exit:authenticated', () => userFsm.handle('logout'));
-authFsm.on('enter:registering', () => {
-    registrationForm.render().$el.appendTo('body');
-});
-authFsm.on('exit:registering', () => {
-    registrationForm.$el.detach();
-});
 
 loginForm.on('submit', credentials => user.login(credentials));
 loginForm.on('cancel', () => authFsm.handle('loginCancel'));

frontend/src/aspects/exploration.ts

@@ -0,0 +1,69 @@
+import { partial, isString } from 'lodash';
+
+import channel from '../explorer/radio';
+import * as act from '../explorer/route-actions';
+import router from '../global/exploration-router';
+import mainRouter from '../global/main-router';
+import explorer from '../global/explorer-view';
+import controller from '../global/explorer-controller';
+import { ensureSources } from '../global/sources';
+import sourceListPanel from '../global/source-list-view';
+
+const browserHistory = window.history;
+const resetSourceList = () => explorer.reset(sourceListPanel);
+
+/**
+ * Common patterns for the explorer routes.
+ */
+function deepRoute(obtainAction, resetAction) {
+    return ([serial]) => explorer.scrollOrAction(
+        browserHistory.state,
+        () => resetAction(controller, obtainAction(serial))
+    );
+}
+const sourceRoute = partial(deepRoute, act.getSource);
+const itemRoute = partial(deepRoute, act.getItem);
+
+mainRouter.on('route:explore', () => {
+    ensureSources();
+    explorer.scrollOrAction(sourceListPanel.cid, resetSourceList);
+});
+
+router.on('route:source:bare',       sourceRoute(act.sourceWithoutAnnotations));
+router.on('route:source:annotated',  sourceRoute(act.sourceWithAnnotations));
+router.on('route:item',                itemRoute(act.item));
+router.on('route:item:edit',           itemRoute(act.itemInEditMode));
+router.on('route:item:related',        itemRoute(act.itemWithRelations));
+router.on('route:item:related:edit',   itemRoute(act.itemWithEditRelations));
+router.on('route:item:external',       itemRoute(act.itemWithExternal));
+router.on('route:item:external:edit',  itemRoute(act.itemWithEditExternal));
+router.on('route:item:annotations',    itemRoute(act.itemWithOccurrences));
+
+channel.on({
+    'sourceview:showAnnotations': controller.reopenSourceAnnotations,
+    'sourceview:hideAnnotations': controller.unlistSourceAnnotations,
+    'sourceview:textSelected': controller.selectText,
+    'annotationList:showAnnotation': controller.openSourceAnnotation,
+    'annotationList:hideAnnotation': controller.closeSourceAnnotation,
+    'annotationEditView:saveNew': controller.saveNewAnnotation,
+    'annotationEditView:save': controller.saveAnnotation,
+    'annotationEditView:close': controller.closeEditAnnotation,
+    'lditem:showRelated': controller.listRelated,
+    'lditem:showAnnotations': controller.listItemAnnotations,
+    'lditem:showExternal': controller.listExternal,
+    'lditem:editAnnotation': controller.editAnnotation,
+    'lditem:editItem': controller.notImplemented,
+    'relItems:itemClick': controller.openRelated,
+    'relItems:edit': controller.editRelated,
+    'externalItems:edit': controller.editExternal,
+    'externalItems:edit-close': controller.closeEditExternal,
+    'relItems:edit-close': controller.closeEditRelated,
+    'source-list:click': controller.pushSourcePair,
+    'searchResultList:itemClicked': controller.openSearchResult,
+}, controller);
+channel.on('currentRoute', (route, panel) => {
+    router.navigate(route);
+    // Amend the state that Backbone.history just pushed with the cid of the
+    // panel.
+    browserHistory.replaceState(panel.cid, document.title);
+});

frontend/src/aspects/navigation.ts

@@ -0,0 +1,49 @@
+import { history } from 'backbone';
+
+import footerView from '../global/footer-view';
+import menuView from '../global/menu-view';
+import welcomeView from '../global/welcome-view';
+import feedbackView from '../global/feedback-view';
+import uploadSourceForm from '../global/upload-source-form';
+import categoryStyles from '../global/category-styles';
+import user from '../global/user';
+import mainRouter from '../global/main-router';
+import explorationRouter from '../global/exploration-router';
+import userFsm from '../global/user-fsm';
+import explorerView from '../global/explorer-view';
+
+history.once('route', () => {
+    menuView.render().$el.appendTo('#header');
+    footerView.render().$el.appendTo('.footer');
+    categoryStyles.$el.appendTo('body');
+    // 133 is the height of the footer (got this number by manually testing)
+    // Note that the same number needs to be the height of the 'push' class in
+    // main.sass. 555 is min-height.
+    const availableHeight = Math.max($(window).height() - 160, 555);
+    explorerView.setHeight(availableHeight).render();
+    uploadSourceForm.setHeight(availableHeight);
+});
+
+mainRouter.on('route:home', () => mainRouter.navigate('search'));
+mainRouter.on('route:search', () => userFsm.handle('search'));
+mainRouter.on('route:upload', () => userFsm.handle('upload'));
+mainRouter.on('route:explore', () => userFsm.handle('explore'));
+mainRouter.on('route:leave', () => userFsm.handle('leave'));
+
+explorationRouter.on('route', () => userFsm.handle('explore'));
+
+userFsm.on('enter:searching', () => welcomeView.render().$el.appendTo('#main'));
+userFsm.on('exit:searching', () => welcomeView.$el.detach());
+userFsm.on('enter:uploading', () => {
+    uploadSourceForm.render().$el.appendTo('#main');
+});
+userFsm.on('exit:uploading', () => {
+    uploadSourceForm.reset();
+    uploadSourceForm.$el.detach();
+});
+userFsm.on('enter:exploring', () => explorerView.$el.appendTo('#main'));
+userFsm.on('exit:exploring', () => explorerView.$el.detach());
+
+menuView.on('feedback', () => feedbackView.render().$el.appendTo('body'));
+
+feedbackView.on('close', () => feedbackView.$el.detach());