Merge pull request intermine#16 from akshatbhargava123/master

Adds functionality to change color operations

src/RootContainer.js

@@ -15,6 +15,7 @@ class RootContainer extends React.Component {
  filteredPdbIds: null,
  selectedId: 0,
  viewerMode: 'cartoon',
+ colorMode: 'uniform',
  error: null,
  searchedId: '',
  hoveredId: null
@@ -70,35 +71,44 @@ class RootContainer extends React.Component {
  }
 
  initVisualizer(ids, selectedId) {
- if (!ids) ids = this.state.pdbIds;
- if (!selectedId) selectedId = this.state.selectedId;
+ const {
+ colorMode,
+ viewerMode,
+ pdbIds,
+ selectedId: stateSelectedId
+ } = this.state;
+
+ if (!ids) ids = pdbIds;
+ if (!selectedId) selectedId = stateSelectedId;
+
  pv.io.fetchPdb(
  `https://files.rcsb.org/download/${ids[selectedId]}.pdb`,
  structure => {
  if (!structure)
  return this.setState({
  error: 'No results found in RCSB Protein Data Bank'
  });
+
  this.setState({ structureReady: true }, () => {
  // remove all current HTML from main element
  // initialise protein visualizer with default init options
- this.visualizer.current.innerHTML = '';
- const viewer = pv.Viewer(this.visualizer.current, {
+
+ const visualizer = this.visualizer.current;
+ visualizer.innerHTML = '';
+ const viewer = pv.Viewer(visualizer, {
  quality: 'medium',
  antialias: true,
  outline: false,
  slabMode: 'auto'
  });
 
- const go = viewer.renderAs(
- 'structure',
- structure,
- this.state.viewerMode,
- {
- color: pv.color.ssSuccession(),
- showRelated: '1'
- }
- );
+ const go = viewer.renderAs('structure', structure, viewerMode, {
+ color:
+ colorMode === 'uniform'
+ ? pv.color.ssSuccession()
+ : pv.color.bySS(),
+ showRelated: '1'
+ });
 
  // find camera orientation such that the molecules biggest extents are
  // aligned to the screen plane.
@@ -139,14 +149,18 @@ class RootContainer extends React.Component {
  );
  }
 
- changeMode(ev) {
+ changeViewerMode(ev) {
  this.setState({ viewerMode: ev.target.value }, () => {
  this.visualizer.current.innerHTML = '';
  this.setState({ structureReady: false });
  this.initVisualizer();
  });
  }
 
+ changeColoringMode(ev) {
+ this.setState({ colorMode: ev.target.value }, this.initVisualizer);
+ }
+
  handleSearch(ev) {
  const { value } = ev.target;
  this.setState(
@@ -160,9 +174,9 @@ class RootContainer extends React.Component {
  }
 
  render() {
- const PdbIdList =
-  this.state.filteredPdbIds &&
- this.state.filteredPdbIds.map((id, i) => (
+ let PdbIdList;
+ if (this.state.filteredPdbIds) {
+ PdbIdList = this.state.filteredPdbIds.map((id, i) => (
  <div key={i}>
  <div
  className={`option ${this.state.selectedId == i && 'selected'}`}
@@ -175,7 +189,7 @@ class RootContainer extends React.Component {
  {this.state.detailsLoading ? (
  <Loading />
  ) : (
- <>
+ <React.Fragment>
  <h3>{this.state.focusedIdTitle}</h3>
  <a
  href={`https://www.rcsb.org/structure/${id}`}
@@ -185,12 +199,13 @@ class RootContainer extends React.Component {
  >
  open RCSB page
  </a>
- </>
+ </React.Fragment>
  )}
  </div>
  )}
  </div>
  ));
+ }
 
  const ViewerModes = [
  'sline',
@@ -206,6 +221,12 @@ class RootContainer extends React.Component {
  </option>
  ));
 
+ const ColoringModes = ['uniform', 'By Secondary Structure'].map(m => (
+ <option key={m} value={m}>
+ {m}
+ </option>
+ ));
+
  if (this.state.error)
  return <div className="viz-container error">{this.state.error}</div>;
 
@@ -231,10 +252,19 @@ class RootContainer extends React.Component {
  placeholder="Select viewer mode"
  className="viewer-select"
  value={this.state.viewerMode}
- onChange={this.changeMode.bind(this)}
+ onChange={this.changeViewerMode.bind(this)}
  >
  {ViewerModes}
  </select>
+ <span className="heading">Select Coloring Mode</span>
+ <select
+ placeholder="Select viewer mode"
+ className="viewer-select"
+ // value={this.state.viewerMode}
+ onChange={this.changeColoringMode.bind(this)}
+ >
+ {ColoringModes}
+ </select>
  <input
  className="heading"
  placeholder="Search and Select a PDB ID"