All files / components/yBars Labels.js

89.47% Statements 17/19
50% Branches 1/2
85.71% Functions 6/7
89.47% Lines 17/19
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141                                                        129x 129x       129x         129x 129x               13x                           11x 11x 11x             13x 13x                 16x 16x                     4x         4x                                                     4x 6x                              
/**
* Copyright 2018, Plotly, Inc.
* All rights reserved.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React, { Component, PureComponent } from 'react';
import PropTypes from 'prop-types';
import shallowCompare from 'react-addons-shallow-compare';
import {
  partialRight,
  pick,
} from 'lodash-es';
 
import msaConnect from '../../store/connect'
import shallowSelect from '../../utils/shallowSelect';
import autobind from '../../utils/autobind';
 
import YBar from './yBar';
 
function createLabel({sequences, tileHeight, labelComponent,
  labelStyle, labelAttributes}) {
  /**
   * Displays an individual sequence name.
   */
  class Label extends PureComponent {
    render() {
      const {index, ...otherProps} = this.props;
      Iif (labelComponent) {
        const LabelComponent = labelComponent;
        return <LabelComponent sequence={sequences[index]} index={index} />;
      } else {
        otherProps.style = {
          ...this.props.style,
          height: tileHeight,
          ...labelStyle
        }
        const attributes = {...otherProps, ...labelAttributes};
        return (
          <div {...attributes} >
            {sequences[index].name}
          </div>
        );
      }
    }
  }
  return Label;
}
 
/**
 * Displays the sequence names.
 */
class HTMLLabelsComponent extends PureComponent {
 
  static labelProps = [
    "sequences", "tileHeight",
    "labelComponent", "labelStyle", "labelAttributes"
  ];
 
  constructor(props) {
    super(props);
    autobind(this, 'createLabel');
    this.label= shallowSelect(
      partialRight(pick, this.constructor.labelProps),
      this.createLabel
    );
  }
 
  createLabel(props) {
    this.cache = function(){};
    return createLabel(props);
  }
 
  render() {
    const {cacheElements,
      dispatch,
      labelComponent,
      labelStyle,
      labelAttributes,
      ...otherProps} = this.props;
    return (
      <YBar
        tileComponent={this.label(this.props)}
        cacheElements={cacheElements}
        componentCache={this.cache}
        {...otherProps}
      />
    );
  }
}
 
HTMLLabelsComponent.defaultProps = {
  cacheElements: 10,
  labelStyle: {},
};
 
HTMLLabelsComponent.propTypes = {
  /**
   * Font of the sequence labels, e.g. `20px Arial`
   */
  font: PropTypes.string,
 
  /**
   * Component to create labels from.
   */
  labelComponent: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
 
  /**
   * Inline styles to apply to the Label component
   */
  style: PropTypes.object,
 
  /**
   * Inline styles to apply to each label.
   */
  labelStyle: PropTypes.object,
 
  /**
   * Attributes to apply to each label.
   */
  labelAttributes: PropTypes.object,
}
 
const mapStateToProps = state => {
  return {
    height: state.props.height,
    tileHeight: state.props.tileHeight,
    sequences: state.sequences.raw,
    nrYTiles: state.sequenceStats.nrYTiles,
  }
}
 
export default msaConnect(
  mapStateToProps,
)(HTMLLabelsComponent);
// for testing
export {
  HTMLLabelsComponent as Labels,
}