Show Rfam alignment

Author: caduribas

src/actions/actionTypes.js

@@ -3,6 +3,7 @@ export const FETCH_RESULTS = 'FETCH_RESULTS';
 export const FETCH_INFERNAL_RESULTS = 'FETCH_INFERNAL_RESULTS';
 export const FAILED_FETCH_RESULTS = 'FAILED_FETCH_RESULTS';
 
+export const TOGGLE_INFERNAL_ALIGNMENTS_COLLAPSED = 'TOGGLE_INFERNAL_ALIGNMENTS_COLLAPSED';
 export const TOGGLE_ALIGNMENTS_COLLAPSED = 'TOGGLE_ALIGNMENTS_COLLAPSED';
 export const TOGGLE_DETAILS_COLLAPSED = 'TOGGLE_DETAILS_COLLAPSED';
 export const TOGGLE_FACET = 'TOGGLE_FACET';

src/actions/actions.js

@@ -28,6 +28,9 @@ let buildQuery = function (selectedFacets) {
   return outputText;
 };
 
+export function toggleInfernalAlignmentsCollapsed() {
+  return {type: types.TOGGLE_INFERNAL_ALIGNMENTS_COLLAPSED };
+}
 
 export function toggleAlignmentsCollapsed() {
   return {type: types.TOGGLE_ALIGNMENTS_COLLAPSED };

src/containers/SequenceSearch/components/Results/index.jsx

@@ -129,21 +129,32 @@ class Results extends React.Component {
                         <th>Bit score</th>
                         <th>E-value</th>
                         <th>Strand</th>
+                        <th>Alignment</th>
                       </tr>
                     </thead>
-                    <tbody>
                     {this.props.infernalEntries.map((entry, index) => (
-                      <tr key={`${index}`}>
+                    <tbody key={`${index}`}>
+                      <tr>
                         <td><a href={`https://rfam.org/family/${entry.target_name}`} target="_blank">{entry.description}</a></td>
                         <td><a href={`https://rfam.org/family/${entry.accession_rfam}`} target="_blank">{entry.accession_rfam}</a></td>
                         <td>{entry.seq_from}</td>
                         <td>{entry.seq_to}</td>
                         <td>{entry.score}</td>
                         <td>{entry.e_value}</td>
                         <td>{entry.strand}</td>
+                        <td>
+                          <a onClick={ this.props.onToggleInfernalAlignmentsCollapsed }>
+                            { this.props.infernalAlignmentsCollapsed ? <span>&#x25B6; Show</span> : <span>&#x25BC; Hide</span> }
+                          </a>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td colSpan={8} className={`callout alignment`} style={{borderTop: "none"}}>
+                          {this.props.infernalAlignmentsCollapsed ? '' : entry.alignment }
+                        </td>
                       </tr>
-                    ))}
                     </tbody>
+                    ))}
                   </table>
                 ] : <p>The query sequence did not match any <img src={'https://rnacentral.org/static/img/expert-db-logos/rfam.png'} alt="Rfam logo" style={{width: "6%", verticalAlign: "sub"}}/> families.</p>}
               </div>
@@ -210,6 +221,7 @@ function mapStateToProps(state) {
     jobId: state.jobId,
     jobList: state.jobList,
     infernalEntries: state.infernalEntries,
+    infernalAlignmentsCollapsed: state.infernalAlignmentsCollapsed,
     exactMatch: state.exactMatch,
     rnacentral: state.rnacentral,
   };
@@ -218,6 +230,7 @@ function mapStateToProps(state) {
 function mapDispatchToProps(dispatch) {
   return {
     onLoadMore: (event) => dispatch(actionCreators.onLoadMore(event)),
+    onToggleInfernalAlignmentsCollapsed: (event) => dispatch(actionCreators.toggleInfernalAlignmentsCollapsed(event)),
   }
 }
 

src/reducers/rootReducer.js

@@ -119,6 +119,11 @@ const rootReducer = function (state = initialState, action) {
         alignmentsCollapsed: !state.alignmentsCollapsed
       });
 
+    case actions.TOGGLE_INFERNAL_ALIGNMENTS_COLLAPSED:
+      return Object.assign({}, state, {
+        infernalAlignmentsCollapsed: !state.infernalAlignmentsCollapsed
+      });
+
     case actions.TOGGLE_DETAILS_COLLAPSED:
       return Object.assign({}, state, {
         detailsCollapsed: !state.detailsCollapsed

src/store/initialState.js

@@ -32,6 +32,7 @@ let initialState = {
   // cmscan search
   infernalStatus: statusChoices.notSubmitted,
   infernalEntries: [],
+  infernalAlignmentsCollapsed: true,
 };
 
 export default initialState;