ConnectedSpaces (or whatever other name...) thoughts.

Connected-Bio-App.js

// This is what using the connected-spaces library would look like from the
// perspective of the application that is consuming it, such connected-bio.

/**  **** app.js **** */

import ConnectedSpaces from 'conected-spaces'
import PopulationsSpace from './wrapped-components/populations-space'
//...etc

render () {
  <ConnectedSpaces collection={this.state.collectionArray}>
    <Space enabled={true} selected={true} component={PopulationsSpace} />
    <Space enabled={true} component={OrganismScopeSpace} />
    <Space enabled={false} component={ProteinSpace} />
  </ConnectedSpaces>
}

/**  **** wrapped-components/populations-space.js **** */
/**  (simple wrapping example) */

import PopulationsReact from 'populations'

class PopulationsSpace extends Component {

  // `addItemToCollection` prop is added by the Spaces component
  handleSelectOrganism(org) {
    this.props.addItemToCollection({
      data: org,
      type: "Organism",
      thumbnail: org.getImage()
    });
  }

  // called directly from Spaces parent component. Could be a prop change, but
  // we don't necessarily want to trigger a re-render.
  triggerItemSelectedFromCollection(item) {
    if (item.type === "Organism") {
      this.populationsModel.addOrg(item.data);
    }
  }

  render() {
    //...
    <PopulationsReact
      onSelectOrganism={this.handleSelectOrganism} />
  }
}


/**  **** wrapped-components/organism-scope-space.js **** */
/**  (more complex wrapping example, with common UI elements taken from connected-spaces lib) */

import OrganismScope from 'organism-scope'
import { MainPanel, ModelFrame, BarChart } from 'connected-spaces'

class OrganismScopeSpace extends Component {

  triggerItemSelectedFromCollection(item) {
    if (item.type === "Organism") {
      this.setState({currentOrg: item.data});
    }
  }

  render() {
    <MainPanel>
        <ModelFrame>
            <OrganismScope org={this.state.currentOrg} />
        </ModelFrame>
        <BarChart data={this.state.currentOrg.substances} />
    </MainPanel>
  }
}


// NOTE: If the "organism-scope" model were being written with the connected-spaces app and UI in mind, it might
// simply export this as the main app directly, in which case it wouldn't need to be separately wrapped by the
// connected-bio app. Wrapping is mostly for models such as Populations which are more likely to be used in
// other contexts, and don't know about connected-spaces.