Skip to content

Commit

Permalink
lint
Browse files Browse the repository at this point in the history
  • Loading branch information
chgibb committed Sep 10, 2019
1 parent b90d4e2 commit 55c9549
Show file tree
Hide file tree
Showing 5 changed files with 101 additions and 82 deletions.
Expand Up @@ -12,8 +12,8 @@ import {GenomeBuilderAppBar} from "./containers/genomeBuilderAppBar";
import {GenomeBuilderOverlays} from "./containers/genomeBuilderOverlays";
import {CircularGenomeEditCache, CircularGenomeEditOpts, CircularGenomeEditAction} from "./editCache/cirularGenomeEditCache";
import {changeName} from "./editCache/changeName";
import { changeContigText } from './editCache/changeContigText';
import { changeContigBodyColour } from './editCache/changeContigBodyColour';
import {changeContigText} from "./editCache/changeContigText";
import {changeContigBodyColour} from "./editCache/changeContigBodyColour";

export interface CircularGenomeBuilderViewState {
figureSelectOvelayOpen: boolean;
Expand Down
Expand Up @@ -35,19 +35,20 @@ export function GenomeBuilderOverlays(this: CircularGenomeBuilderView, props: {
<EditContigsOverlay
figure={figure}
open={this.state.editContigsOverlayOpen}
onSave={(opts) => {
onSave={(opts) =>
{
if(figure)
{
if(opts.newName)
{
this.changeContigText(figure,opts.contigUuid,opts.newName);
}
if(opts.newName)
{
this.changeContigText(figure,opts.contigUuid,opts.newName);
}

if(opts.newBodyColour)
{
this.changeContigBodyColour(figure,opts.contigUuid,opts.newBodyColour);
if(opts.newBodyColour)
{
this.changeContigBodyColour(figure,opts.contigUuid,opts.newBodyColour);
}
}
}
}}
onClose={() =>
{
Expand Down
@@ -1,15 +1,15 @@
import * as React from "react";
import { SketchPicker, ColorResult, RGBColor } from "react-color";
import {SketchPicker, ColorResult, RGBColor} from "react-color";

import { CircularFigure, Contig } from "../../../../circularFigure/circularFigure";
import { GridWrapper } from "../../../../containers/gridWrapper";
import { Grid } from "../../../../components/grid";
import { IconButton } from "../../../../components/iconButton";
import { blue } from "../../../../styles/colours";
import { ChevronLeft } from "../../../../components/icons/chevronLeft";
import { OutlinedInput } from "../../../../components/outlinedInput";
import { Button } from '../../../../components/button';
import { Typography } from '../../../../components/typography';
import {CircularFigure, Contig} from "../../../../circularFigure/circularFigure";
import {GridWrapper} from "../../../../containers/gridWrapper";
import {Grid} from "../../../../components/grid";
import {IconButton} from "../../../../components/iconButton";
import {blue} from "../../../../styles/colours";
import {ChevronLeft} from "../../../../components/icons/chevronLeft";
import {OutlinedInput} from "../../../../components/outlinedInput";
import {Button} from "../../../../components/button";
import {Typography} from "../../../../components/typography";

export interface EditContigOverlayProps {
onClose: () => void;
Expand All @@ -28,53 +28,55 @@ export interface EditContigOverlayState {

}

export function EditContigOverlay(props: EditContigOverlayProps): JSX.Element {
export function EditContigOverlay(props: EditContigOverlayProps): JSX.Element
{
let endteredName = "";
let enteredTextColour: ColorResult | undefined;
let enteredBodyColour: ColorResult | undefined;
return (
<div>

<div style={{ marginLeft: "2vh" }}>
<div style={{marginLeft: "2vh"}}>
<Grid container spacing={4} justify="flex-start">
<IconButton
edge="start"
color="primary"
classes={{ colorPrimary: blue }}
classes={{colorPrimary: blue}}
onClick={props.onClose}
>
<ChevronLeft />
</IconButton>
</Grid>
</div>

<div style={{ marginLeft: "2.5vh" }}>
<div style={{marginLeft: "2.5vh"}}>
<Grid container spacing={4} justify="flex-start">
<Typography>Name in reference:</Typography>
</Grid>
</div>
<GridWrapper>
<div style={{ marginRight: "1vh", marginLeft: "1vh", marginBottom: "1vh", marginTop: "1vh" }}>
<div style={{marginRight: "1vh", marginLeft: "1vh", marginBottom: "1vh", marginTop: "1vh"}}>
<Grid container spacing={4} justify="center">
<Grid item>
<Typography>{props.contig.name}</Typography>
</Grid>
</Grid>
</div>
</GridWrapper>
<div style={{ marginLeft: "2.5vh" }}>
<div style={{marginLeft: "2.5vh"}}>
<Grid container spacing={4} justify="flex-start">
<Typography>Name to display:</Typography>
</Grid>
</div>
<GridWrapper>
<div style={{ marginRight: "1vh", marginLeft: "1vh", marginBottom: "1vh", marginTop: "1vh" }}>
<div style={{marginRight: "1vh", marginLeft: "1vh", marginBottom: "1vh", marginTop: "1vh"}}>
<Grid container spacing={4} justify="center">
<Grid item>
<OutlinedInput
label={props.contig.alias}
inputProps={{
onChange: (event) => {
onChange: (event) =>
{
endteredName = event.target.value;
}
}}
Expand All @@ -83,25 +85,26 @@ export function EditContigOverlay(props: EditContigOverlayProps): JSX.Element {
</Grid>
</div>
</GridWrapper>
<div style={{ marginLeft: "2.5vh" }}>
<div style={{marginLeft: "2.5vh"}}>
<Grid container spacing={4} justify="flex-start">
<Typography>Text opacity:</Typography>
</Grid>
</div>
<GridWrapper>
<div style={{ marginRight: "1vh", marginLeft: "1vh", marginBottom: "1vh", marginTop: "1vh" }}>
<div style={{marginRight: "1vh", marginLeft: "1vh", marginBottom: "1vh", marginTop: "1vh"}}>
<Grid container spacing={4} justify="center">
<Grid item>
<OutlinedInput
label={props.contig.opacity ? props.contig.opacity.toString() : ""}
inputProps={{
onChange: (event) => {
onChange: (event) =>
{
if(event.target.value)
{
console.log(parseFloat(event.target.value));
if(parseFloat(event.target.value) == NaN)
{
alert(`Opacity must be a number`);
alert("Opacity must be a number");
}
}
}
Expand All @@ -111,37 +114,39 @@ export function EditContigOverlay(props: EditContigOverlayProps): JSX.Element {
</Grid>
</div>
</GridWrapper>
<div style={{ marginLeft: "2.5vh" }}>
<div style={{marginLeft: "2.5vh"}}>
<Grid container spacing={4} justify="flex-start">
<Typography>Text colour:</Typography>
</Grid>
</div>
<GridWrapper>
<div style={{ marginRight: "1vh", marginLeft: "1vh", marginBottom: "1vh", marginTop: "1vh" }}>
<div style={{marginRight: "1vh", marginLeft: "1vh", marginBottom: "1vh", marginTop: "1vh"}}>
<Grid container spacing={4} justify="center">
<Grid item>
<SketchPicker
color={props.contig.fontFill}
onChange={(color: ColorResult) => {
onChange={(color: ColorResult) =>
{
enteredTextColour = color;
}}
/>
</Grid>
</Grid>
</div>
</GridWrapper>
<div style={{ marginLeft: "2.5vh" }}>
<div style={{marginLeft: "2.5vh"}}>
<Grid container spacing={4} justify="flex-start">
<Typography>Body colour:</Typography>
</Grid>
</div>
<GridWrapper>
<div style={{ marginRight: "1vh", marginLeft: "1vh", marginBottom: "1vh", marginTop: "1vh" }}>
<div style={{marginRight: "1vh", marginLeft: "1vh", marginBottom: "1vh", marginTop: "1vh"}}>
<Grid container spacing={4} justify="center">
<Grid item>
<SketchPicker
color={props.contig.color}
onChange={(color: ColorResult) => {
onChange={(color: ColorResult) =>
{
enteredBodyColour = color;
}}
/>
Expand All @@ -150,7 +155,7 @@ export function EditContigOverlay(props: EditContigOverlayProps): JSX.Element {
</div>
</GridWrapper>
<GridWrapper>
<div style={{ marginRight: "1vh", marginLeft: "1vh", marginBottom: "1vh", marginTop: "1vh" }}>
<div style={{marginRight: "1vh", marginLeft: "1vh", marginBottom: "1vh", marginTop: "1vh"}}>
<Grid container spacing={4} justify="center">
<Grid item>
<Button
Expand All @@ -162,11 +167,12 @@ export function EditContigOverlay(props: EditContigOverlayProps): JSX.Element {
<Grid item>
<Button
label="Save"
onClick={() => {
onClick={() =>
{
props.onSave({
contigUuid: props.contig.uuid,
newName: endteredName,
newBodyColour: enteredBodyColour ? enteredBodyColour.hex : '',
newBodyColour: enteredBodyColour ? enteredBodyColour.hex : "",
newTextColour : undefined
});
}}
Expand Down
@@ -1,30 +1,36 @@
import { CircularGenomeBuilderView } from '../circularGenomeBuilderView';
import { CircularFigure } from '../../../circularFigure/circularFigure';
import {CircularGenomeBuilderView} from "../circularGenomeBuilderView";
import {CircularFigure} from "../../../circularFigure/circularFigure";

export function changeContigBodyColour(this: CircularGenomeBuilderView, figure: CircularFigure, contigUuid: string, colour: string): void {
export function changeContigBodyColour(this: CircularGenomeBuilderView, figure: CircularFigure, contigUuid: string, colour: string): void
{
this.maybePushEdit(
figure, {
description: `Change contig body colour to ${colour}`,
commit: (figure: CircularFigure) => {
let contig = figure.contigs.find(x => x.uuid == contigUuid);
description: `Change contig body colour to ${colour}`,
commit: (figure: CircularFigure) =>
{
let contig = figure.contigs.find(x => x.uuid == contigUuid);

if (contig) {
console.log(contig.color);
console.log(colour);
contig.color = colour;
}
},
afterCommit: () => {
this.saveFigures();
},
rollback: (newFigure: CircularFigure, oldFigure: CircularFigure) => {
let newContig = newFigure.contigs.find(x => x.uuid == contigUuid);
let oldContig = oldFigure.contigs.find(x => x.uuid == contigUuid);
if (contig)
{
console.log(contig.color);
console.log(colour);
contig.color = colour;
}
},
afterCommit: () =>
{
this.saveFigures();
},
rollback: (newFigure: CircularFigure, oldFigure: CircularFigure) =>
{
let newContig = newFigure.contigs.find(x => x.uuid == contigUuid);
let oldContig = oldFigure.contigs.find(x => x.uuid == contigUuid);

if (newContig && oldContig) {
newContig.color = oldContig.color;
if (newContig && oldContig)
{
newContig.color = oldContig.color;
}
}
}
}
);
}
@@ -1,28 +1,34 @@
import { CircularGenomeBuilderView } from '../circularGenomeBuilderView';
import { CircularFigure } from '../../../circularFigure/circularFigure';
import {CircularGenomeBuilderView} from "../circularGenomeBuilderView";
import {CircularFigure} from "../../../circularFigure/circularFigure";

export function changeContigText(this: CircularGenomeBuilderView, figure: CircularFigure, contigUuid: string, text: string): void {
export function changeContigText(this: CircularGenomeBuilderView, figure: CircularFigure, contigUuid: string, text: string): void
{
this.maybePushEdit(
figure, {
description: `Change contig text to ${text}`,
commit: (figure: CircularFigure) => {
let contig = figure.contigs.find(x => x.uuid == contigUuid);
description: `Change contig text to ${text}`,
commit: (figure: CircularFigure) =>
{
let contig = figure.contigs.find(x => x.uuid == contigUuid);

if (contig) {
contig.alias = text;
}
},
afterCommit: () => {
this.saveFigures();
},
rollback: (newFigure: CircularFigure, oldFigure: CircularFigure) => {
let newContig = newFigure.contigs.find(x => x.uuid == contigUuid);
let oldContig = oldFigure.contigs.find(x => x.uuid == contigUuid);
if (contig)
{
contig.alias = text;
}
},
afterCommit: () =>
{
this.saveFigures();
},
rollback: (newFigure: CircularFigure, oldFigure: CircularFigure) =>
{
let newContig = newFigure.contigs.find(x => x.uuid == contigUuid);
let oldContig = oldFigure.contigs.find(x => x.uuid == contigUuid);

if (newContig && oldContig) {
newContig.alias = oldContig.alias;
if (newContig && oldContig)
{
newContig.alias = oldContig.alias;
}
}
}
}
);
}

0 comments on commit 55c9549

Please sign in to comment.