Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
ConnectedSpaces (or whatever other name...) thoughts.
// 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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment