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 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 | /** * 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, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import { pick } from 'lodash-es'; import msaConnect from '../../store/connect' import XBar from './xBar'; function createMarker({markerSteps, startIndex, tileWidth, font, markerComponent, markerStyle, markerAttributes}) { /** * Displays an individual sequence name. */ class Marker extends PureComponent { render() { const {index, ...otherProps} = this.props; if (markerComponent) { const MarkerComponent = markerComponent; return <MarkerComponent index={index} /> } else { otherProps.style = { width: tileWidth, display: "inline-block", textAlign: "center", ...markerStyle } let name; if (index % markerSteps === 0) { name = index+ 0 + startIndex; } else { name = '.'; } const attributes = {...otherProps, ...markerAttributes}; return ( <div {...attributes} > {name} </div> ); } } } return Marker; } /** * Displays the sequence names with an arbitrary Marker component */ class HTMLPositionBarComponent extends PureComponent { componentWillMount() { this.updateMarker(); } componentWillUpdate() { this.updateMarker(); } updateMarker() { this.marker = createMarker(pick(this.props, [ "markerSteps", "startIndex", "tileWidth", "markerComponent", "markerStyle", "markerAttributes", ])); } render() { const {cacheElements, markerSteps, startIndex, dispatch, markerComponent, markerStyle, ...otherProps} = this.props; return ( <XBar tileComponent={this.marker} cacheElements={cacheElements} {...otherProps} /> ); } } HTMLPositionBarComponent.defaultProps = { style: { font: "12px Arial", }, height: 15, markerSteps: 2, startIndex: 1, cacheElements: 10, markerStyle: {}, }; HTMLPositionBarComponent.propTypes = { /** * Font of the sequence labels, e.g. `20px Arial` */ font: PropTypes.string, /** * Height of the PositionBar (in pixels), e.g. `100` */ height: PropTypes.number, /** * At which steps the position labels should appear, e.g. `2` for (1, 3, 5) */ markerSteps: PropTypes.number, /** * At which number the PositionBar marker should start counting. * Typical values are: `1` (1-based indexing) and `0` (0-based indexing). */ startIndex: PropTypes.number, /** * Component to create markers from. */ markerComponent: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), /** * Inline styles to apply to the PositionBar component */ style: PropTypes.object, /** * Inline styles to apply to each marker. */ markerStyle: PropTypes.object, /** * Attributes to apply to each marker. */ markerAttributes: PropTypes.object, } const mapStateToProps = state => { return { sequences: state.sequences.raw, maxLength: state.sequences.maxLength, width: state.props.width, tileWidth: state.props.tileWidth, nrXTiles: state.sequenceStats.nrXTiles, } } export default msaConnect( mapStateToProps, )(HTMLPositionBarComponent); export { HTMLPositionBarComponent as PositionBar, } |