Allow to have nested collection/sample routes

app/assets/javascripts/components/App.js

@@ -18,16 +18,12 @@ Aviator.setRoutes({
   '/': 'root',
   target: {
     root: function(e) {
-      UIActions.deselectAllElements('sample');
-      //UIActions.selectCollection({id: 'all'});
-
       let modalDomNode = document.getElementById('modal');
       if(modalDomNode) {
         React.unmountComponentAtNode(modalDomNode);
       }
     }
   },
-
   '/collection': {
     target: {
       show: function(e) {
@@ -40,10 +36,10 @@ Aviator.setRoutes({
   '/sample': {
     target: {
       show: function(e) {
-        UIActions.selectElement({type: 'sample', id: e['params']['id']})
+        UIActions.selectElement({type: 'sample', id: e['params']['sampleID']})
       }
     },
-    '/:id': 'show'
+    '/:sampleID': 'show'
   },
   '/sharing': {
     '/*': 'showShareModal',

app/assets/javascripts/components/CollectionSubtree.js

@@ -11,10 +11,10 @@ import Aviator from 'aviator';
 export default class CollectionSubtree extends React.Component {
   constructor(props) {
     super(props);
-    let uiStoreState = UIStore.getState();
-    let selected = uiStoreState.currentCollectionId == props.root.id;
-    let childIds = props.root.children.map(c => c.id);
-    let visible = childIds.indexOf(parseInt(uiStoreState.currentCollectionId)) > -1
+
+    let uiState = UIStore.getState();
+    let selected = uiState.currentCollectionId == props.root.id;
+    let visible = props.root.descendant_ids.indexOf(parseInt(uiState.currentCollectionId)) > -1
 
     this.state = {
       label: props.root.label,

app/assets/javascripts/components/CollectionTree.js

@@ -63,10 +63,12 @@ export default class CollectionTree extends React.Component {
   }
 
   render() {
+    //Fake All-Collection
     let allCollection = {
       label: 'All *',
       id: 'all',
-      children: []
+      children: [],
+      descendant_ids: []
     };
 
     return (

app/assets/javascripts/components/ElementsTable.js

 import React from 'react';
 import {Label, Pagination, Table} from 'react-bootstrap';
 
+import UIStore from './stores/UIStore';
 import ElementStore from './stores/ElementStore';
 import ElementAllCheckbox from './ElementAllCheckbox';
 import ElementCheckbox from './ElementCheckbox';
@@ -116,7 +117,8 @@ export default class ElementsTable extends React.Component {
   }
 
   showDetails(element) {
-    Aviator.navigate(`/${element.type}/${element.id}`);
+    let uiState = UIStore.getState();
+    Aviator.navigate(`/collection/${uiState.currentCollectionId}/${element.type}/${element.id}`);
   }
 
   handlePaginationSelect(event, selectedEvent) {

app/assets/javascripts/components/SampleDetails.js

@@ -4,6 +4,10 @@ import SVG from 'react-inlinesvg';
 
 import ElementActions from './actions/ElementActions';
 import ElementStore from './stores/ElementStore';
+
+import UIActions from './actions/UIActions';
+import UIStore from './stores/UIStore';
+
 import NumeralInputWithUnits from './NumeralInputWithUnits'
 import ElementCollectionLabels from './ElementCollectionLabels';
 
@@ -39,7 +43,9 @@ export default class SampleDetails extends React.Component {
   }
 
   closeDetails() {
-    Aviator.navigate('/');
+    let uiState = UIStore.getState();
+    UIActions.deselectAllElements('sample');
+    Aviator.navigate(`/collection/${uiState.currentCollectionId}`);
   }
 
   updateSample() {

app/serializers/collection_serializer.rb

 class CollectionSerializer < ActiveModel::Serializer
-  attributes :id, :label
+  attributes :id, :label, :descendant_ids
 
   has_many :children
 
@@ -7,4 +7,8 @@ class CollectionSerializer < ActiveModel::Serializer
     object.children
   end
 
+  def descendant_ids
+    object.descendant_ids
+  end
+
 end