Add table for coloring by secondary structure and add static styling …

…to style.less

src/ColorTable.js

@@ -1,62 +1,60 @@
-import { Component } from 'react';
+const uniform_color_table = [
+ ['#FFFFFF', 'hydrogen (H)'],
+ ['#000000', 'carbon (C)'],
+ ['#2233FF', 'nitrogen (N)'],
+ ['#FF2200', 'oxygen (O)'],
+ ['#1FF01F', 'fluorine (F), chlorine (Cl)'],
+ ['#992200', 'bromine (Br)'],
+ ['#6600BB', 'iodine (I)'],
+ ['#00FFFF', 'noble gases (He, Ne, Ar, Xe, Kr)'],
+ ['#FF9900', 'phosphorus (P)'],
+ ['#FFE522', 'sulfur (S)'],
+ ['#FFAA77', 'boron (B), most transition metals'],
+ ['#7700FF', 'alkali metals (Li, Na, K, Rb, Cs, Fr)'],
+ ['#007700', 'alkaline earth metals (Be, Mg, Ca, Sr, Ba, Ra)'],
+ ['#999999', 'titanium (Ti)'],
+ ['#DD7700', 'iron (Fe)'],
+ ['#DD77FF', 'other elements']
+];
 
-class ColorTable extends Component {
- constructor(props) {
- super(props);
+const secondary_color_table = [
+ ['#FF0080', 'α helix'],
+ ['#A00080', `3${'\u2081\u2080'} helix`],
+ ['#600080', 'π helix'],
+ ['#FFC800', 'β strand'],
+ ['#6080FF', '(β) turn'],
+ ['#FFFFFF', 'other'],
+ ['#AE00FE', 'DNA'],
+ ['#FD0162', 'RNA'],
+ ['#A6A6FA', 'Carbohydrate'],
+ ['#808080', 'other']
+];
 
- this.state = {
- color_table: [
- ['#FFFFFF', 'hydrogen (H)'],
- ['#000000', 'carbon (C)'],
- ['#2233FF', 'nitrogen (N)'],
- ['#FF2200', 'oxygen (O)'],
- ['#1FF01F', 'fluorine (F), chlorine (Cl)'],
- ['#992200', 'bromine (Br)'],
- ['#6600BB', 'iodine (I)'],
- ['#00FFFF', 'noble gases (He, Ne, Ar, Xe, Kr)'],
- ['#FF9900', 'phosphorus (P)'],
- ['#FFE522', 'sulfur (S)'],
- ['#FFAA77', 'boron (B), most transition metals'],
- ['#7700FF', 'alkali metals (Li, Na, K, Rb, Cs, Fr)'],
- ['#007700', 'alkaline earth metals (Be, Mg, Ca, Sr, Ba, Ra)'],
- ['#999999', 'titanium (Ti)'],
- ['#DD7700', 'iron (Fe)'],
- ['#DD77FF', 'other elements']
- ]
- };
- this.setColor = this.setColor.bind(this);
- }
- setColor(colorValue) {
- let background = {
- height: '10px',
- width: '10px',
- margin: '0px 0px 0px 0px',
- background: colorValue,
- border: 'thin solid grey'
- };
- return background;
- }
- render() {
- return (
- <div>
- <table>
- <tbody>
- {this.state.color_table.map(element => {
- return (
- <tr>
- <td>
- <div style={this.setColor(element[0])}></div>
- </td>
+const ColorTable = ({ colorMode }) => {
+ const color_table =
+ colorMode == 'uniform' ? uniform_color_table : secondary_color_table;
+ return (
+ <div className="color-table">
+ <table>
+ <tbody>
+ {color_table.map(element => {
+ return (
+ <tr className="color-table-row">
+ <td>
+ <div
+ className="color-table-box"
+ style={{ background: element[0] }}
+ ></div>
+ </td>
 
- <td>{element[1]}</td>
- </tr>
- );
- })}
- </tbody>
- </table>
- </div>
- );
- }
+ <td>{element[1]}</td>
+ </tr>
+ );
+ })}
+ </tbody>
+ </table>
+ </div>
+ );
 }
 
 export default ColorTable;

src/RootContainer.js

@@ -274,8 +274,8 @@ class RootContainer extends React.Component {
  <div style={{ maxHeight: 300, overflow: 'scroll' }}>
  {PdbIdList.length ? PdbIdList : 'No search results!'}
  </div>
- <div className='color-table'>
- <ColorTable />
+ <div>
+ <ColorTable colorMode={this.state.colorMode} />
  </div>
  </div>
  </div>

src/style.less

@@ -1,5 +1,4 @@
 .bluegenesProteinVisualizer {
-
  font-family: sans-serif;
 
  .details-panel {
@@ -8,7 +7,7 @@
  flex-direction: column;
  align-items: center;
  border: 1px solid lightgrey;
- padding: 10px;
+ padding: 10px;
  .title-text {
  font-size: 14px;
  font-weight: 300;
@@ -47,7 +46,6 @@
  display: flex;
  flex-direction: column;
 
-
  .viewer-select {
  font-size: 24px;
  margin-bottom: 20px;
@@ -68,12 +66,6 @@
  .option.selected {
  background: lightgrey;
  }
-
- .color-table {
- position: relative;
- max-height: 200px;
- overflow: scroll;
- }
  }
  }
 
@@ -92,7 +84,7 @@
  span {
  width: 0.3em;
  height: 1em;
- background-color: #ADE394;
+ background-color: #ade394;
  }
 
  span:nth-of-type(1) {
@@ -129,4 +121,15 @@
  }
  }
 
+ .color-table {
+ position: relative;
+ max-height: 150px;
+ overflow: scroll;
+ .color-table-box {
+ border: thin solid grey;
+ height: 10px;
+ width: 10px;
+ margin: 0px 0px 0px 0px;
+ }
+ } 
 }