add UI for changing y-axis maximum

weng-lab · Sep 23, 2019 · 78287af · 78287af
1 parent 83e2db3
commit 78287af
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 1,415 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "logosj-webapp",
-  "version": "1.2.1",
+  "version": "1.3.1",
   "license": "MIT",
   "author": "Henry Pratt",
   "homepage": "/app",
@@ -10,7 +10,7 @@
     "compression": "^1.7.4",
     "copy-to-clipboard": "^3.2.0",
     "jszip": "^3.2.2",
-    "logosj-react": "^1.1.3",
+    "logosj-react": "^1.2.1",
     "pretty": "^2.0.0",
     "prismjs": "^1.17.1",
     "react": "^16.8.6",

diff --git a/src/components/workspace/uploadworkspace/menu.jsx b/src/components/workspace/uploadworkspace/menu.jsx
@@ -19,7 +19,8 @@ ${logoinfo.ppm.map(x => "        " + JSON.stringify(x)).join(",\n")}
     backgroundFrequencies: ${JSON.stringify(logoinfo.backgroundFrequencies)},
     alphabet: loadGlyphComponents([
 ${logoinfo.alphabet.map(x => "        " + JSON.stringify({ regex: x.regex, color: x.color })).join(",\n")}
-    ])
+    ]),
+    yAxisMax: ${logoinfo.yAxisMax}
 };
 
 export const MyLogo = props => (
@@ -37,7 +38,8 @@ ${logoinfo.ppm.map(x => "      " + JSON.stringify(x)).join(",\n")}
     backgroundFrequencies: ${JSON.stringify(logoinfo.backgroundFrequencies)},
     alphabet: logosj.loadGlyphComponents([
 ${logoinfo.alphabet.map(x => "      " + JSON.stringify({ regex: x.regex, color: x.color })).join(",\n")}
-    ])
+    ]),
+    yAxisMax: ${logoinfo.yAxisMax}
   };
   logosj.embedLogo(document.getElementById("logo"), logoProps);
 }

diff --git a/src/components/workspace/uploadworkspace/settings.jsx b/src/components/workspace/uploadworkspace/settings.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { Menu, Button, Header } from 'semantic-ui-react';
+import { Menu, Button, Header, Form, Radio, Input } from 'semantic-ui-react';
+import { FREQUENCY } from 'logosj-react';
 
 import { ModeDropdown, GlyphList, ColoredInput } from '../settings/index';
 
@@ -8,15 +9,31 @@ const CONFIRM = "Are you sure? This action cannot be undone.";
 const SettingsPanel = ({ onLogoTypeChange, onScaleChange, onStartPosChange,
 			 onModeChange, mode, logodefault, scaledefault,
 			 startposdefault, alphabet, onAlphabetUpdate, onFrequencyChange,
-                         backgroundFrequencies, onApplyToFile, onApplyToAll }) => (
+                         backgroundFrequencies, onApplyToFile, onApplyToAll, yAxisAuto,
+                         onYAxisToggle, yAxisMax }) => (
 			     <Menu vertical style={{ width: '100%', backgroundColor: "#fafafa" }}>
 			       <Menu.Item>
-				 <ModeDropdown header="Letter Height"
+				 <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>
+                               )}
                                <Menu.Item>
                                  <ColoredInput header="Starting base number" defaultValue={startposdefault || 1} onChange={onStartPosChange} />
                                </Menu.Item>

diff --git a/src/components/workspace/uploadworkspace/uploadworkspace.jsx b/src/components/workspace/uploadworkspace/uploadworkspace.jsx
@@ -25,7 +25,8 @@ class UploadWorkspace extends React.Component {
             errors: [],
             total: 0,
             remaining: 0,
-            pasteModalShown: false
+            pasteModalShown: false,
+            yAxisAuto: true
         };
     }
 
@@ -36,7 +37,8 @@ class UploadWorkspace extends React.Component {
             mode: logo.mode,
             startpos: logo.startpos || 0,
             alphabet: logo.alphabet,
-            backgroundFrequencies: logo.backgroundFrequencies
+            backgroundFrequencies: logo.backgroundFrequencies,
+            yAxisMax: logo.yAxisAuto === false ? logo.yAxisMax : null
 	};
     }
 
@@ -283,10 +285,19 @@ class UploadWorkspace extends React.Component {
         });
         return map;
     }
+
+    _yAxisToggle(yAxisAuto, yAxisMax) {
+        this._updateCurrent({
+            yAxisAuto,
+            yAxisMax
+        });
+    }
 
     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;
 	return (
 	    <React.Fragment>
 	      <PasteModal open={this.state.pasteModalShown} onClose={this.pasteModalClosed.bind(this)} />
@@ -305,7 +316,11 @@ class UploadWorkspace extends React.Component {
                           alphabet={this.state.selected ? this.state.selected.alphabet : []}
                           backgroundFrequencies={this._backgroundFrequencyMap()}
                           onFrequencyChange={this._backgroundUpdate.bind(this)}
-                          onAlphabetUpdate={this._alphabetUpdate.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)) ))}
+                          onYAxisToggle={this._yAxisToggle.bind(this)}
+                        />
                       </Grid.Column>
                   )}
                   <Grid.Column width={this.state.selected ? 13 : 16} style={{ height: '100%' }}>
@@ -370,8 +385,7 @@ 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 {...this.state.selected}
-                            width="90%" height="100%" />)}
+                            { isdone && (<Logo {...selectedProps} width="90%" height="100%" />)}
                           </div>
                           <div style={{ maxHeight: "500px", height: "30%", textAlign: "center" }}>
                             <WorkspaceEditorTabs