copy and delete dialogs

chgibb · Nov 16, 2019 · 49c6d74 · 49c6d74
1 parent 3dc238d
commit 49c6d74
Show file tree

Hide file tree

Showing 4 changed files with 117 additions and 31 deletions.
diff --git a/src/req/renderer/views/circularGenomeBuilderView/circularGenomeBuilderView.tsx b/src/req/renderer/views/circularGenomeBuilderView/circularGenomeBuilderView.tsx
@@ -32,6 +32,8 @@ import { DialogTitle } from '../../components/dialogTitle';
 import { DialogActions } from '../../components/dialogActions';
 import { Button } from '../../components/button';
 import { enQueueOperation } from '../../enQueueOperation';
+import { CopyFigureDialog } from './containers/copyFigureDialog';
+import { DeleteFigureDialog } from './containers/deleteFigureDialog';
 
 export interface CircularGenomeBuilderViewState {
     figureSelectOvelayOpen: boolean;
@@ -40,6 +42,7 @@ export interface CircularGenomeBuilderViewState {
     editBPTrackOptionsOverlayOpen : boolean;
     coverageTrackOverlayOpen : boolean;
     copyFigureDialogOpen : boolean;
+    deleteFigureDialogOpen : boolean;
     selectedFigure: string;
     figurePosition : {
         width : number,
@@ -77,6 +80,8 @@ export class CircularGenomeBuilderView extends React.Component<CircularGenomeBui
     protected toggleCoverageTrackLayerVisibility = toggleCoverageTrackLayerVisibility.bind(this);
     private GenomeBuilderAppBar = GenomeBuilderAppBar.bind(this);
     private GenomeBuilderOverlays = GenomeBuilderOverlays.bind(this);
+    private CopyFigureDialog = CopyFigureDialog.bind(this);
+    private DeleteFigureDialog = DeleteFigureDialog.bind(this);
     public constructor(props: CircularGenomeBuilderViewProps) 
     {
         super(props);
@@ -214,37 +219,8 @@ export class CircularGenomeBuilderView extends React.Component<CircularGenomeBui
                         />
                     ) : ""
                 }
-                <Dialog
-                    open={this.state.copyFigureDialogOpen}
-                    onClose={()=>{this.setState({copyFigureDialogOpen:false});}}
-                >
-                    <DialogTitle>{"Copy Figure?"}</DialogTitle>
-                    <DialogActions>
-                        <Button
-                            onClick={()=>{this.setState({copyFigureDialogOpen:false});}}
-                            type="retreat"
-                            label="Cancel"
-                        />
-
-                        <Button
-                            onClick={()=>{
-                                    this.setState({
-                                        copyFigureDialogOpen:false
-                                    });
-
-                                    if(figure)
-                                    {
-                                        enQueueOperation({
-                                            opName: "copyCircularFigure",
-                                            data : figure
-                                        });
-                                    }
-                                }}
-                            type="advance"
-                            label="Copy"
-                        />
-                    </DialogActions>
-                </Dialog>
+                <this.CopyFigureDialog figure={figure} />
+                <this.DeleteFigureDialog figure={figure} />
             </React.Fragment>
         );
     }

diff --git a/src/req/renderer/views/circularGenomeBuilderView/containers/copyFigureDialog.tsx b/src/req/renderer/views/circularGenomeBuilderView/containers/copyFigureDialog.tsx
@@ -0,0 +1,46 @@
+import * as React from "react";
+
+import { CircularGenomeBuilderView } from '../circularGenomeBuilderView';
+import { Dialog } from '../../../components/dialog';
+import { DialogTitle } from '../../../components/dialogTitle';
+import { CircularFigure } from '../../../circularFigure/circularFigure';
+import { DialogActions } from '../../../components/dialogActions';
+import { Button } from '../../../components/button';
+import { enQueueOperation } from '../../../enQueueOperation';
+
+export function CopyFigureDialog(this : CircularGenomeBuilderView, props: { figure: CircularFigure | undefined }): JSX.Element 
+{
+    return (
+        <Dialog
+                    open={this.state.copyFigureDialogOpen}
+                    onClose={()=>{this.setState({copyFigureDialogOpen:false});}}
+                >
+                    <DialogTitle>{"Copy Figure?"}</DialogTitle>
+                    <DialogActions>
+                        <Button
+                            onClick={()=>{this.setState({copyFigureDialogOpen:false});}}
+                            type="retreat"
+                            label="Cancel"
+                        />
+
+                        <Button
+                            onClick={()=>{
+                                    this.setState({
+                                        copyFigureDialogOpen:false
+                                    });
+
+                                    if(props.figure)
+                                    {
+                                        enQueueOperation({
+                                            opName: "copyCircularFigure",
+                                            data : props.figure
+                                        });
+                                    }
+                                }}
+                            type="advance"
+                            label="Copy"
+                        />
+                    </DialogActions>
+                </Dialog>
+    );
+}
diff --git a/src/req/renderer/views/circularGenomeBuilderView/containers/deleteFigureDialog.tsx b/src/req/renderer/views/circularGenomeBuilderView/containers/deleteFigureDialog.tsx
@@ -0,0 +1,46 @@
+import * as React from "react";
+
+import { CircularGenomeBuilderView } from '../circularGenomeBuilderView';
+import { Dialog } from '../../../components/dialog';
+import { DialogTitle } from '../../../components/dialogTitle';
+import { CircularFigure } from '../../../circularFigure/circularFigure';
+import { DialogActions } from '../../../components/dialogActions';
+import { Button } from '../../../components/button';
+import { enQueueOperation } from '../../../enQueueOperation';
+
+export function DeleteFigureDialog(this : CircularGenomeBuilderView, props: { figure: CircularFigure | undefined }): JSX.Element 
+{
+    return (
+        <Dialog
+                    open={this.state.deleteFigureDialogOpen}
+                    onClose={()=>{this.setState({deleteFigureDialogOpen:false});}}
+                >
+                    <DialogTitle>{"Delete Figure?"}</DialogTitle>
+                    <DialogActions>
+                        <Button
+                            onClick={()=>{this.setState({deleteFigureDialogOpen:false});}}
+                            type="retreat"
+                            label="Cancel"
+                        />
+
+                        <Button
+                            onClick={()=>{
+                                    this.setState({
+                                        deleteFigureDialogOpen:false
+                                    });
+
+                                    if(props.figure)
+                                    {
+                                        enQueueOperation({
+                                            opName: "deleteCircularFigure",
+                                            data : props.figure
+                                        });
+                                    }
+                                }}
+                            type="advance"
+                            label="Delete"
+                        />
+                    </DialogActions>
+                </Dialog>
+    );
+}
diff --git a/src/req/renderer/views/circularGenomeBuilderView/containers/genomeBuilderAppBar.tsx b/src/req/renderer/views/circularGenomeBuilderView/containers/genomeBuilderAppBar.tsx
@@ -15,6 +15,7 @@ import {MenuRounded} from "../../../components/icons/menuRounded";
 
 import {appBar} from "./styles/appBar";
 import { FileCopyOutlined } from '../../../components/icons/fileCopyOutlined';
+import { DeleteForeverOutlined } from '../../../components/icons/deleteForeverOutlined';
 
 export function GenomeBuilderAppBar(this: CircularGenomeBuilderView, props: { figure: CircularFigure | undefined }): JSX.Element 
 {
@@ -91,6 +92,23 @@ export function GenomeBuilderAppBar(this: CircularGenomeBuilderView, props: { fi
                             <FileCopyOutlined />
                         </IconButton>
                     </Tooltip>
+                    <Tooltip title="Delete Figure">
+                        <IconButton
+                            edge="start"
+                            color="primary"
+                            classes={{colorPrimary: white}}
+                            onClick={()=>
+                            {
+                                if(figure){
+                                    this.setState({
+                                        deleteFigureDialogOpen : true
+                                    });
+                                }
+                            }}
+                        >
+                            <DeleteForeverOutlined />
+                        </IconButton>
+                    </Tooltip>
                     <Tooltip title="Customize Contigs">
                         <IconButton
                             edge="start"