edit interval length and label direction

chgibb · Sep 16, 2019 · 24669d0 · 24669d0
1 parent 7785392
commit 24669d0
Show file tree

Hide file tree

Showing 5 changed files with 133 additions and 2 deletions.
diff --git a/src/req/renderer/views/circularGenomeBuilderView/circularGenomeBuilderView.tsx b/src/req/renderer/views/circularGenomeBuilderView/circularGenomeBuilderView.tsx
@@ -22,6 +22,8 @@ import {changeContigStart} from "./editCache/changeContigStart";
 import {changeContigEnd} from "./editCache/changeContigEnd";
 import {changeRadius} from "./editCache/changeRadius";
 import {toggleTrackIntervalLabels} from "./editCache/toggleTrackIntervalLabels";
+import { changeIntervalLength } from './editCache/changeIntervalLength';
+import { changeIntervalLabelDirection } from './editCache/changeIntervalLabelDirection';
 
 export interface CircularGenomeBuilderViewState {
     figureSelectOvelayOpen: boolean;
@@ -57,6 +59,8 @@ export class CircularGenomeBuilderView extends React.Component<CircularGenomeBui
     protected newCustomContig = newCustomContig.bind(this);
     protected changeRadius = changeRadius.bind(this);
     protected toggleTrackIntervalLabels = toggleTrackIntervalLabels.bind(this);
+    protected changeIntervalLength = changeIntervalLength.bind(this);
+    protected changeIntervalLabelDirection = changeIntervalLabelDirection.bind(this);
     private GenomeBuilderAppBar = GenomeBuilderAppBar.bind(this);
     private GenomeBuilderOverlays = GenomeBuilderOverlays.bind(this);
     public constructor(props: CircularGenomeBuilderViewProps) 

diff --git a/src/req/renderer/views/circularGenomeBuilderView/containers/genomeBuilderOverlays.tsx b/src/req/renderer/views/circularGenomeBuilderView/containers/genomeBuilderOverlays.tsx
@@ -106,6 +106,16 @@ export function GenomeBuilderOverlays(this: CircularGenomeBuilderView, props: {
                                     {
                                         this.toggleTrackIntervalLabels(figure,opts.newShowLabels);
                                     }
+
+                                    if(opts.newInterval !== undefined)
+                                    {
+                                        this.changeIntervalLength(figure,opts.newInterval);
+                                    }
+
+                                    if(opts.newDirection !== undefined)
+                                    {
+                                        this.changeIntervalLabelDirection(figure,opts.newDirection);
+                                    }
                                 }
                             }}
                             onClose={()=>

diff --git a/src/req/renderer/views/circularGenomeBuilderView/containers/overlays/editBPTrackOverlay.tsx b/src/req/renderer/views/circularGenomeBuilderView/containers/overlays/editBPTrackOverlay.tsx
@@ -16,7 +16,9 @@ export interface EditBPTrackOverlayProps {
     onClose: () => void;
     onSave: (opts: {
         newRadius?: number,
+        newInterval? : number,
         newShowLabels? : 0 | 1,
+        newDirection? : "in" | "out",
     }) => void;
     open: boolean;
     figure: CircularFigure;
@@ -25,8 +27,10 @@ export interface EditBPTrackOverlayProps {
 export function EditBPTrackOverlay(props: EditBPTrackOverlayProps): JSX.Element 
 {
     let enteredRadius: number | undefined;
+    let enteredInterval : number | undefined;
 
     let [showLabels, setShowLabels] = React.useState(props.figure.circularFigureBPTrackOptions.showLabels);
+    let [direction,setDirection] = React.useState(props.figure.circularFigureBPTrackOptions.direction);
 
     return (
         <Overlay
@@ -74,6 +78,11 @@ export function EditBPTrackOverlay(props: EditBPTrackOverlayProps): JSX.Element
                         </Grid>
                     </div>
                 </GridWrapper>
+                <div style={{marginLeft: "2.5vh"}}>
+                    <Grid container spacing={4} justify="center">
+                        <Typography>Show Interval Labels:</Typography>
+                    </Grid>
+                </div>
                 <GridWrapper>
                     <div style={{marginRight: "1vh", marginLeft: "1vh", marginBottom: "1vh", marginTop: "1vh"}}>
                         <Grid container spacing={4} justify="center">
@@ -89,13 +98,73 @@ export function EditBPTrackOverlay(props: EditBPTrackOverlayProps): JSX.Element
                                             }}
                                         />}
 
-                                        label="Show Interval Labels"
+                                        label=""
+                                    />
+                                </FormGroup>
+                            </Grid>
+                        </Grid>
+                    </div>
+                </GridWrapper>
+                {
+                    showLabels ? 
+                    <React.Fragment>
+                        <div style={{marginLeft: "2.5vh"}}>
+                    <Grid container spacing={4} justify="center">
+                        <Typography>Show Interval Labels Outside Base:</Typography>
+                    </Grid>
+                </div>
+                        <GridWrapper>
+                    <div style={{marginRight: "1vh", marginLeft: "1vh", marginBottom: "1vh", marginTop: "1vh"}}>
+                        <Grid container spacing={4} justify="center">
+                            <Grid item>
+                                <FormGroup>
+                                    <FormControlLabel
+                                        control={<Switch
+                                            color="primary"
+                                            checked={direction == "out" ? true : false}
+                                            onChange={(event) => 
+                                            {
+                                                setDirection(event.target.checked ? "out" : "in");
+                                            }}
+                                        />}
+                                        label=""
                                     />
                                 </FormGroup>
                             </Grid>
                         </Grid>
                     </div>
                 </GridWrapper>
+                    <div style={{marginLeft: "2.5vh"}}>
+                    <Grid container spacing={4} justify="flex-start">
+                        <Typography>Interval Length:</Typography>
+                    </Grid>
+                </div>
+                <GridWrapper>
+                    <div style={{marginRight: "1vh", marginLeft: "1vh", marginBottom: "1vh", marginTop: "1vh"}}>
+                        <Grid container spacing={4} justify="center">
+                            <Grid item>
+                                <OutlinedInput
+                                    label={props.figure.circularFigureBPTrackOptions.interval.toString()}
+                                    inputProps={{
+                                        onChange: (event) => 
+                                        {
+                                            let newInterval: number | typeof NaN = parseFloat(event.target.value);
+                                            if (isNaN(newInterval)) 
+                                            {
+                                                alert("Interval must be a number");
+                                                return;
+                                            }
+
+                                            enteredInterval = newInterval;
+                                        }
+                                    }}
+                                />
+                            </Grid>
+                        </Grid>
+                    </div>
+                </GridWrapper>
+                </React.Fragment> : null
+                }
                 <GridWrapper>
                     <div style={{marginRight: "1vh", marginLeft: "1vh", marginBottom: "1vh", marginTop: "1vh"}}>
                         <Grid container spacing={4} justify="center">
@@ -113,7 +182,9 @@ export function EditBPTrackOverlay(props: EditBPTrackOverlayProps): JSX.Element
                                     {
                                         props.onSave({
                                             newRadius: enteredRadius,
-                                            newShowLabels: showLabels != props.figure.circularFigureBPTrackOptions.showLabels ? showLabels : undefined
+                                            newInterval : enteredInterval,
+                                            newShowLabels: showLabels != props.figure.circularFigureBPTrackOptions.showLabels ? showLabels : undefined,
+                                            newDirection : direction != props.figure.circularFigureBPTrackOptions.direction ? direction : undefined,
                                         });
                                     }}
                                     type="advance"

diff --git a/src/req/renderer/views/circularGenomeBuilderView/editCache/changeIntervalLabelDirection.ts b/src/req/renderer/views/circularGenomeBuilderView/editCache/changeIntervalLabelDirection.ts
@@ -0,0 +1,23 @@
+import {CircularFigure} from "../../../circularFigure/circularFigure";
+import {CircularGenomeBuilderView} from "../circularGenomeBuilderView";
+
+export function changeIntervalLabelDirection(this: CircularGenomeBuilderView, figure: CircularFigure, direction: "in" | "out"): void 
+{
+    this.maybePushEdit(
+        figure, {
+            description: `Change interval direction to ${direction}`,
+            commit: (figure: CircularFigure) => 
+            {
+                figure.circularFigureBPTrackOptions.direction = direction;
+            },
+            afterCommit: () => 
+            {
+                this.saveFigures();
+            },
+            rollback: (newFigure: CircularFigure, oldFigure: CircularFigure) => 
+            {
+                newFigure.circularFigureBPTrackOptions.direction = oldFigure.circularFigureBPTrackOptions.direction;
+            }
+        }
+    );
+} 
diff --git a/src/req/renderer/views/circularGenomeBuilderView/editCache/changeIntervalLength.ts b/src/req/renderer/views/circularGenomeBuilderView/editCache/changeIntervalLength.ts
@@ -0,0 +1,23 @@
+import {CircularFigure} from "../../../circularFigure/circularFigure";
+import {CircularGenomeBuilderView} from "../circularGenomeBuilderView";
+
+export function changeIntervalLength(this: CircularGenomeBuilderView, figure: CircularFigure, interval: number): void 
+{
+    this.maybePushEdit(
+        figure, {
+            description: `Change interval length to ${interval}`,
+            commit: (figure: CircularFigure) => 
+            {
+                figure.circularFigureBPTrackOptions.interval = interval;
+            },
+            afterCommit: () => 
+            {
+                this.saveFigures();
+            },
+            rollback: (newFigure: CircularFigure, oldFigure: CircularFigure) => 
+            {
+                newFigure.circularFigureBPTrackOptions.interval = oldFigure.circularFigureBPTrackOptions.interval;
+            }
+        }
+    );
+}