include colour picker and pass through contig text change

chgibb · Sep 10, 2019 · 87a7d5b · 87a7d5b
1 parent 7e37802
commit 87a7d5b
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 26 deletions.
diff --git a/src/req/renderer/views/circularGenomeBuilderView/circularGenomeBuilderView.tsx b/src/req/renderer/views/circularGenomeBuilderView/circularGenomeBuilderView.tsx
@@ -12,6 +12,7 @@ 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';
 
 export interface CircularGenomeBuilderViewState {
     figureSelectOvelayOpen: boolean;
@@ -36,6 +37,7 @@ export class CircularGenomeBuilderView extends React.Component<CircularGenomeBui
     public editCaches : {[index : string] : CircularGenomeEditCache | undefined} = {};
 
     protected changeName = changeName.bind(this);
+    protected changeContigText = changeContigText.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
@@ -35,6 +35,15 @@ export function GenomeBuilderOverlays(this: CircularGenomeBuilderView, props: {
                         <EditContigsOverlay
                             figure={figure}
                             open={this.state.editContigsOverlayOpen}
+                            onSave={(opts) => {
+                                if(figure)
+                                {
+                                if(opts.newName)
+                                {
+                                    this.changeContigText(figure,opts.contigUuid,opts.newName);
+                                }
+                            }
+                            }}
                             onClose={() => 
                             {
                                 this.setState({

diff --git a/src/req/renderer/views/circularGenomeBuilderView/containers/overlays/editContigOverlay.tsx b/src/req/renderer/views/circularGenomeBuilderView/containers/overlays/editContigOverlay.tsx
@@ -1,32 +1,43 @@
 import * as React from "react";
+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 { 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';
 
-export interface EditContigOverlayProps
-{
-    onClose : () => void;
-    figure : CircularFigure;
-    contig : Contig;
-    allowMovingSelectContig : boolean;
+export interface EditContigOverlayProps {
+    onClose: () => void;
+    onSave: (opts: {
+        contigUuid: string,
+        newName?: string,
+        newColour?: string,
+    }) => void;
+    figure: CircularFigure;
+    contig: Contig;
+    allowMovingSelectContig: boolean;
 }
 
-export function EditContigOverlay(props : EditContigOverlayProps) : JSX.Element
-{
+export interface EditContigOverlayState {
+
+}
+
+export function EditContigOverlay(props: EditContigOverlayProps): JSX.Element {
+    let endteredName = "";
+    let enteredColour: RGBColor | undefined;
     return (
         <div>
             <GridWrapper>
-                <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 />
@@ -35,15 +46,14 @@ 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>
                             <OutlinedInput
                                 label={props.contig.alias}
                                 inputProps={{
-                                    onChange: () => 
-                                    {
-
+                                    onChange: (event) => {
+                                        endteredName = event.target.value;
                                     }
                                 }}
                             />
@@ -52,7 +62,21 @@ 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>
+                            <SketchPicker
+                                color={props.contig.color}
+                                onChange={(color: ColorResult) => {
+                                    enteredColour = color.rgb;
+                                }}
+                            />
+                        </Grid>
+                    </Grid>
+                </div>
+            </GridWrapper>
+            <GridWrapper>
+                <div style={{ marginRight: "1vh", marginLeft: "1vh", marginBottom: "1vh", marginTop: "1vh" }}>
                     <Grid container spacing={4} justify="center">
                         <Grid item>
                             <Button
@@ -64,9 +88,14 @@ export function EditContigOverlay(props : EditContigOverlayProps) : JSX.Element
                         <Grid item>
                             <Button
                                 label="Save"
-                                onClick={() => 
-                                {
-                                    props.onSave(enteredValue);
+                                onClick={() => {
+                                    props.onSave({
+                                        contigUuid: props.contig.uuid,
+                                        newName: endteredName,
+                                        newColour: enteredColour ?
+                                            `rgb(${enteredColour.r},${enteredColour.g},${enteredColour.b}${enteredColour.a ? `,${enteredColour.a}` : ""})`
+                                            : undefined
+                                    });
                                 }}
                                 type="advance"
                             />

diff --git a/src/req/renderer/views/circularGenomeBuilderView/containers/overlays/editContigsOverlay.tsx b/src/req/renderer/views/circularGenomeBuilderView/containers/overlays/editContigsOverlay.tsx
@@ -13,10 +13,11 @@ import {AddBox} from "../../../../components/icons/addBox";
 import {getReferenceFromUuid} from "../../../../../uniquelyAddressable";
 
 import {Overlay} from "./overlay";
-import {EditContigOverlay} from "./editContigOverlay";
+import {EditContigOverlay, EditContigOverlayProps} from "./editContigOverlay";
 
 export interface EditContigsOverlayProps {
     onClose: () => void;
+    onSave : EditContigOverlayProps["onSave"];
     open: boolean;
     figure: CircularFigure;
 }
@@ -56,6 +57,7 @@ export class EditContigsOverlay extends React.Component<EditContigsOverlayProps,
                                     selectedContigUuid: ""
                                 });
                             }}
+                            onSave={this.props.onSave}
                             figure={this.props.figure}
                             contig={contig}
                             allowMovingSelectContig={this.state.allowMovingSelectContig}

diff --git a/src/req/renderer/views/circularGenomeBuilderView/editCache/changeContigText.ts b/src/req/renderer/views/circularGenomeBuilderView/editCache/changeContigText.ts
@@ -0,0 +1,28 @@
+import { CircularGenomeBuilderView } from '../circularGenomeBuilderView';
+import { CircularFigure } from '../../../circularFigure/circularFigure';
+
+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);
+
+            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;
+            }
+        }
+    }
+    );
+}