Skip to content

Commit

Permalink
allow negative values in editor
Browse files Browse the repository at this point in the history
  • Loading branch information
@hpratt
hpratt committed Sep 23, 2019
1 parent 78287af commit fe46299
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 34 deletions.
52 changes: 28 additions & 24 deletions src/components/workspace/uploadworkspace/settings.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,29 +10,33 @@ const SettingsPanel = ({ onLogoTypeChange, onScaleChange, onStartPosChange,
onModeChange, mode, logodefault, scaledefault,
startposdefault, alphabet, onAlphabetUpdate, onFrequencyChange,
backgroundFrequencies, onApplyToFile, onApplyToAll, yAxisAuto,
onYAxisToggle, yAxisMax }) => (
onYAxisToggle, yAxisMax, hasNegatives }) => (
<Menu vertical style={{ width: '100%', backgroundColor: "#fafafa" }}>
<Menu.Item>
<ModeDropdown header="Letter height"
onChange={onModeChange}
onFrequencyChange={onFrequencyChange}
backgroundFrequencies={backgroundFrequencies}
mode={mode} />
</Menu.Item>
{ mode !== FREQUENCY && (
<Menu.Item>
<Header as="h3">y-axis maximum</Header>
<Form>
<Form.Field>
<Radio label="auto" checked={yAxisAuto} onClick={() => onYAxisToggle(true, yAxisMax)} />
</Form.Field>
<Form.Field>
<Radio onClick={() => onYAxisToggle(false, yAxisMax)} checked={yAxisAuto === false} />&nbsp;
<Input maxLength={5} value={("" + yAxisMax).substring(0, 5) + (yAxisMax === Math.floor(yAxisMax) ? '.' : "")} onChange={e => onYAxisToggle(false, +e.target.value)} style={{ width: "70%" }} size="mini" />
</Form.Field>
</Form>

</Menu.Item>
{ !hasNegatives && (
<React.Fragment>
<Menu.Item>
<ModeDropdown header="Letter height"
onChange={onModeChange}
onFrequencyChange={onFrequencyChange}
backgroundFrequencies={backgroundFrequencies}
mode={mode} />
</Menu.Item>
{ mode !== FREQUENCY && (
<Menu.Item>
<Header as="h3">y-axis maximum</Header>
<Form>
<Form.Field>
<Radio label="auto" checked={yAxisAuto} onClick={() => onYAxisToggle(true, yAxisMax)} />
</Form.Field>
<Form.Field>
<Radio onClick={() => onYAxisToggle(false, yAxisMax)} checked={yAxisAuto === false} />&nbsp;
<Input maxLength={5} value={("" + yAxisMax).substring(0, 5) + (yAxisMax === Math.floor(yAxisMax) ? '.' : "")} onChange={e => onYAxisToggle(false, +e.target.value)} style={{ width: "70%" }} size="mini" />
</Form.Field>
</Form>

</Menu.Item>
)}
</React.Fragment>
)}
<Menu.Item>
<ColoredInput header="Starting base number" defaultValue={startposdefault || 1} onChange={onStartPosChange} />
Expand All @@ -42,8 +46,8 @@ const SettingsPanel = ({ onLogoTypeChange, onScaleChange, onStartPosChange,
</Menu.Item>
<Menu.Item>
<Header as="h3">Apply these settings to...</Header>
<Button onClick={() => window.confirm(CONFIRM) && onApplyToFile && onApplyToFile()}>all motifs in the current file</Button><br/><br/>
<Button onClick={() => window.confirm(CONFIRM) && onApplyToAll && onApplyToAll()}>all loaded motifs</Button>
<Button onClick={() => window.confirm(CONFIRM) && onApplyToFile && onApplyToFile(hasNegatives, mode)}>all motifs in the current file</Button><br/><br/>
<Button onClick={() => window.confirm(CONFIRM) && onApplyToAll && onApplyToAll(hasNegatives, mode)}>all loaded motifs</Button>
</Menu.Item>
</Menu>
);
Expand Down
46 changes: 36 additions & 10 deletions src/components/workspace/uploadworkspace/uploadworkspace.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import { Grid, Menu, Dropdown, Button, Icon } from 'semantic-ui-react';
import { embedLogo, Logo, INFORMATION_CONTENT } from 'logosj-react';
import { embedLogo, Logo, INFORMATION_CONTENT, LogoWithNegatives } from 'logosj-react';

import { _svgdata } from '../../svgdownload/utils';
import SVGZip from '../../../utilities/zipfile';
Expand Down Expand Up @@ -42,12 +42,14 @@ class UploadWorkspace extends React.Component {
};
}

_updateFile() {
_updateFile(hasNegatives, mode) {
const nLogo = {
startpos: this.state.selected.startpos,
alphabet: this.state.selected.alphabet,
backgroundFrequencies: this.state.selected.backgroundFrequencies
alphabet: this.state.selected.alphabet
};
if (!hasNegatives) nLogo.backgroundFrequencies = this.state.selected.backgroundFrequencies;
if (!hasNegatives) nLogo.mode = mode;
if (!hasNegatives && mode === INFORMATION_CONTENT) nLogo.yAxisMax = this.state.selected.yAxisAuto === false ? this.state.selected.yAxisMax : null;
const nSets = [ ...this.state.logoSets ];
const nLogos = this.state.selectedFile.logos.map( logo => ({
...logo,
Expand All @@ -65,12 +67,14 @@ class UploadWorkspace extends React.Component {
});
}

_updateAll() {
_updateAll(hasNegatives, mode) {
const nLogo = {
startpos: this.state.selected.startpos,
alphabet: this.state.selected.alphabet,
backgroundFrequencies: this.state.selected.backgroundFrequencies
alphabet: this.state.selected.alphabet
};
if (!hasNegatives) nLogo.backgroundFrequencies = this.state.selected.backgroundFrequencies;
if (!hasNegatives) nLogo.mode = mode;
if (!hasNegatives && mode === INFORMATION_CONTENT) nLogo.yAxisMax = this.state.selected.yAxisAuto === false ? this.state.selected.yAxisMax : null;
const nSets = [ ...this.state.logoSets ];
nSets.forEach( (logoSet, i) => {
const nLogos = logoSet.logos.map( logo => ({
Expand Down Expand Up @@ -292,12 +296,27 @@ class UploadWorkspace extends React.Component {
yAxisMax
});
}

_hasNegatives(ppm) {
let r = false;
ppm.forEach( row => { row.forEach( x => { if (x < 0) r = true; } ); } );
return r;
}

render() {

let isdone = this.state.remaining === 0 && this.state.logoSets.length > 0;
let selectedPPMs = this.state.selectedFile && this.state.selectedFile.logos;
const selectedProps = this.state.selected ? { ...this.state.selected } : {};
if (selectedProps && selectedProps.yAxisAuto) selectedProps.yAxisMax = null;

const defaultMax = this.state.selected && (
this.state.selected.backgroundFrequencies
? Math.max(...this.state.selected.backgroundFrequencies.map( x => Math.log2(1.0 / (x || 0.01))))
: (this.state.selected.alphabet && Math.log2(this.state.selected.alphabet.length))
);
const hasNegatives = this.state.selected && this.state.selected.ppm && this._hasNegatives(this.state.selected.ppm);

return (
<React.Fragment>
<PasteModal open={this.state.pasteModalShown} onClose={this.pasteModalClosed.bind(this)} />
Expand All @@ -307,6 +326,7 @@ class UploadWorkspace extends React.Component {
{ this.state.selected && (
<Grid.Column width={3}>
<SettingsPanel
hasNegatives={hasNegatives}
onApplyToFile={this._updateFile.bind(this)}
onApplyToAll={this._updateAll.bind(this)}
onStartPosChange={this._startPosChange.bind(this)}
Expand All @@ -317,8 +337,8 @@ class UploadWorkspace extends React.Component {
backgroundFrequencies={this._backgroundFrequencyMap()}
onFrequencyChange={this._backgroundUpdate.bind(this)}
onAlphabetUpdate={this._alphabetUpdate.bind(this)}
yAxisAuto={this.state.selected.yAxisAuto !== false}
yAxisMax={this.state.selected.yAxisMax || Math.max(...this.state.selected.backgroundFrequencies.map( x => Math.log2(1.0 / (x || 0.01)) ))}
yAxisAuto={this.state.selected && this.state.selected.yAxisAuto !== false}
yAxisMax={(this.state.selected && this.state.selected.yAxisMax) || defaultMax}
onYAxisToggle={this._yAxisToggle.bind(this)}
/>
</Grid.Column>
Expand Down Expand Up @@ -385,7 +405,13 @@ class UploadWorkspace extends React.Component {
<div ref={this.hiddenLogo} style={{ display: "none" }} />
<div ref={this.logo}
style={{ maxHeight: "500px", height: "20%", textAlign: "center" }}>
{ isdone && (<Logo {...selectedProps} width="90%" height="100%" />)}
{ isdone && (
hasNegatives ? (
<LogoWithNegatives values={this.state.selected.ppm} {...selectedProps} width="90%" height="100%" />
) : (
<Logo {...selectedProps} width="90%" height="100%" />
)
)}
</div>
<div style={{ maxHeight: "500px", height: "30%", textAlign: "center" }}>
<WorkspaceEditorTabs
Expand Down

0 comments on commit fe46299

Please sign in to comment.