This repository has been archived by the owner on Jan 22, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 71
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #122 from TeselaGen/searching
mergin in branches
- Loading branch information
Showing
9 changed files
with
173 additions
and
70 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,84 +1,109 @@ | ||
| import React, {PropTypes} from 'react'; | ||
| import Caret from './Caret'; | ||
| import PureRenderMixin from 'react-addons-pure-render-mixin'; | ||
| import { propTypes } from './react-props-decorators.js'; | ||
|
|
||
| import styles from './highlight-layer.css'; | ||
|
|
||
| var getXStartAndWidthOfRowAnnotation = require('./getXStartAndWidthOfRowAnnotation'); | ||
| var assign = require('lodash/object/assign'); | ||
| let React = require('react'); | ||
| var Caret = require('./Caret'); | ||
| let getOverlapsOfPotentiallyCircularRanges = require('ve-range-utils/getOverlapsOfPotentiallyCircularRanges'); | ||
| let PureRenderMixin = require('react-addons-pure-render-mixin'); | ||
|
|
||
| var highlightLayerStyle = { | ||
| height: "98%", | ||
| position: "absolute", | ||
| top: "0", | ||
| opacity: ".3", | ||
| }; | ||
|
|
||
| let HighlightLayer = React.createClass({ | ||
| mixins: [PureRenderMixin], | ||
| propTypes: { | ||
| charWidth: React.PropTypes.number.isRequired, | ||
| bpsPerRow: React.PropTypes.number.isRequired, | ||
| color: React.PropTypes.string, | ||
| row: React.PropTypes.object.isRequired, | ||
| sequenceLength: React.PropTypes.number.isRequired, | ||
| selectionLayer: React.PropTypes.object.isRequired, | ||
| }, | ||
| render: function() { | ||
|
|
||
| function mixin(target, source) { | ||
| target = target.prototype; | ||
|
|
||
| Object.getOwnPropertyNames(source).forEach((name) => { | ||
| let sourceProp = Object.getOwnPropertyDescriptor(source, name); | ||
|
|
||
| if (name !== "constructor") { | ||
| Object.defineProperty(target, name, sourceProp); | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| @propTypes({ | ||
| charWidth: PropTypes.number.isRequired, | ||
| bpsPerRow: PropTypes.number.isRequired, | ||
| color: PropTypes.string, | ||
| row: PropTypes.object.isRequired, | ||
| sequenceLength: PropTypes.number.isRequired, | ||
| regions: PropTypes.array.isRequired, | ||
| }) | ||
| export default class HighlightLayer extends React.Component { | ||
| render() { | ||
| var { | ||
| charWidth, | ||
| bpsPerRow, | ||
| row, | ||
| sequenceLength, | ||
| selectionLayer, | ||
| regions, | ||
| color | ||
| } = this.props; | ||
| if (selectionLayer.selected) { | ||
| var startSelectionCursor; | ||
| var endSelectionCursor; | ||
| var overlaps = getOverlapsOfPotentiallyCircularRanges(selectionLayer, row, sequenceLength); | ||
| var selectionLayers = overlaps.map(function(overlap, index) { | ||
| if (overlap.start === selectionLayer.start) { | ||
| startSelectionCursor = (<Caret | ||
| charWidth={charWidth} | ||
| row={row} | ||
| sequenceLength={sequenceLength} | ||
| shouldBlink={!selectionLayer.cursorAtEnd} | ||
| caretPosition= {overlap.start} />) | ||
| } | ||
| if (overlap.end === selectionLayer.end) { | ||
| endSelectionCursor = (<Caret | ||
| charWidth={charWidth} | ||
| row={row} | ||
| sequenceLength={sequenceLength} | ||
| shouldBlink={selectionLayer.cursorAtEnd} | ||
| caretPosition= {overlap.end + 1} />) | ||
| } | ||
| var result = getXStartAndWidthOfRowAnnotation(overlap, bpsPerRow, charWidth); | ||
| var xStart = result.xStart; | ||
| var width = result.width; | ||
|
|
||
| var style = assign({}, highlightLayerStyle, { | ||
| width: width, | ||
| left: xStart, | ||
| background: color ? color : 'blue' | ||
|
|
||
| var selectionLayers; | ||
|
|
||
| for (let i = 0; i < regions.length; i++) { | ||
| let selectionLayer = regions[i]; | ||
|
|
||
| if (selectionLayer.selected) { | ||
| var startSelectionCursor; | ||
| var endSelectionCursor; | ||
| var overlaps = getOverlapsOfPotentiallyCircularRanges(selectionLayer, row, sequenceLength); | ||
| let layers = overlaps.map(function(overlap, index) { | ||
| if (overlap.start === selectionLayer.start) { | ||
| startSelectionCursor = (<Caret | ||
| charWidth={charWidth} | ||
| row={row} | ||
| sequenceLength={sequenceLength} | ||
| shouldBlink={!selectionLayer.cursorAtEnd} | ||
| caretPosition={overlap.start} />); | ||
| } | ||
| if (overlap.end === selectionLayer.end) { | ||
| endSelectionCursor = (<Caret | ||
| charWidth={charWidth} | ||
| row={row} | ||
| sequenceLength={sequenceLength} | ||
| shouldBlink={selectionLayer.cursorAtEnd} | ||
| caretPosition={overlap.end + 1} />); | ||
| } | ||
| var result = getXStartAndWidthOfRowAnnotation(overlap, bpsPerRow, charWidth); | ||
| var xStart = result.xStart; | ||
| var width = result.width; | ||
|
|
||
| var style = { | ||
| width: width, | ||
| left: xStart | ||
| }; | ||
|
|
||
| if (color !== undefined) { | ||
| style.background = color; | ||
| } | ||
|
|
||
| return (<div key={index} className={styles.selectionLayer} style={style}/>); | ||
| }); | ||
| return (<div key={index} className="selectionLayer" style={style}/>); | ||
| }); | ||
|
|
||
| selectionLayers = selectionLayers || []; | ||
| selectionLayers.push(layers); | ||
| } | ||
| } | ||
|
|
||
| if (selectionLayers !== undefined && selectionLayers.length > 0) { | ||
| return ( | ||
| <div onContextMenu={function (event) { | ||
| //tnrtodo: add context menu here | ||
| event.preventDefault(); | ||
| event.stopPropagation(); | ||
| }}> | ||
| {selectionLayers} | ||
| {startSelectionCursor} | ||
| {endSelectionCursor} | ||
| //tnrtodo: add context menu here | ||
| event.preventDefault(); | ||
| event.stopPropagation(); | ||
| }}> | ||
| {selectionLayers} | ||
| {startSelectionCursor} | ||
| {endSelectionCursor} | ||
| </div> | ||
| ); | ||
| } else { | ||
| return null; | ||
| } | ||
|
|
||
| return null; | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| mixin(HighlightLayer, PureRenderMixin); | ||
|
|
||
| module.exports = HighlightLayer; | ||
| module.exports = HighlightLayer; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| function searchSequence({ searchString }, tree, output) { | ||
| if (searchString.length === 0) { | ||
| output({ searchLayers: [] }); | ||
| return; | ||
| } | ||
| var sequence = tree.get(['sequenceData', 'sequence']); | ||
|
|
||
| var layers = []; | ||
| var inResult = false; | ||
| var lastIndex = 0; | ||
|
|
||
| for (let i = 0; i < sequence.length; i++) { | ||
| if (!inResult) { | ||
| lastIndex = i; | ||
| } | ||
|
|
||
| if (sequence[i] === searchString[i - lastIndex]) { | ||
| inResult = true; | ||
|
|
||
| if (i - lastIndex === searchString.length - 1) { | ||
| layers.push({ start: lastIndex, end: i, selected: true }); | ||
| inResult = false; | ||
| } | ||
| } else { | ||
| inResult = false; | ||
| } | ||
| } | ||
|
|
||
| output({ searchLayers: layers }); | ||
| } | ||
|
|
||
| module.exports = searchSequence; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| function updateSearchLayers({ searchLayers }, tree, output) { | ||
| tree.set('searchLayers', searchLayers); | ||
| } | ||
|
|
||
| module.exports = updateSearchLayers; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| .selectionLayer { | ||
| height: 98%; | ||
| position: absolute; | ||
| top: 0; | ||
| opacity: .3; | ||
| background-color: blue; | ||
| } |