diff --git a/src/req/renderer/views/circularGenomeBuilderView/containers/genomeBuilderAppBar.tsx b/src/req/renderer/views/circularGenomeBuilderView/containers/genomeBuilderAppBar.tsx index e345923e7..fb9b61d30 100644 --- a/src/req/renderer/views/circularGenomeBuilderView/containers/genomeBuilderAppBar.tsx +++ b/src/req/renderer/views/circularGenomeBuilderView/containers/genomeBuilderAppBar.tsx @@ -78,7 +78,8 @@ export function GenomeBuilderAppBar(this: CircularGenomeBuilderView, props: { fi edge="start" color="primary" classes={{colorPrimary: white}} - onClick={()=>{ + onClick={()=> + { this.setState({ editContigsOverlayOpen : true }); diff --git a/src/req/renderer/views/circularGenomeBuilderView/containers/genomeBuilderOverlays.tsx b/src/req/renderer/views/circularGenomeBuilderView/containers/genomeBuilderOverlays.tsx index 0dc9b5097..3d00bf7d1 100644 --- a/src/req/renderer/views/circularGenomeBuilderView/containers/genomeBuilderOverlays.tsx +++ b/src/req/renderer/views/circularGenomeBuilderView/containers/genomeBuilderOverlays.tsx @@ -2,9 +2,10 @@ import * as React from "react"; import {CircularGenomeBuilderView} from "../circularGenomeBuilderView"; import {CircularFigure} from "../../../circularFigure/circularFigure"; + import {EditFigureNameOverlay} from "./overlays/editFigureName"; import {FigureSelectOverlay} from "./overlays/figureSelectOverlay"; -import { EditContigsOverlay } from './overlays/editContigsOverlay'; +import {EditContigsOverlay} from "./overlays/editContigsOverlay"; export function GenomeBuilderOverlays(this: CircularGenomeBuilderView, props: { figure: CircularFigure | undefined }): JSX.Element { @@ -34,7 +35,8 @@ export function GenomeBuilderOverlays(this: CircularGenomeBuilderView, props: { { + onClose={() => + { this.setState({ editContigsOverlayOpen : false }); diff --git a/src/req/renderer/views/circularGenomeBuilderView/containers/overlays/editContigOverlay.tsx b/src/req/renderer/views/circularGenomeBuilderView/containers/overlays/editContigOverlay.tsx index b5192a901..215a85ff5 100644 --- a/src/req/renderer/views/circularGenomeBuilderView/containers/overlays/editContigOverlay.tsx +++ b/src/req/renderer/views/circularGenomeBuilderView/containers/overlays/editContigOverlay.tsx @@ -1,12 +1,12 @@ import * as React from "react"; -import { CircularFigure, Contig } from '../../../../circularFigure/circularFigure'; -import { Typography } from '../../../../components/typography'; -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"; export interface EditContigOverlayProps { @@ -22,57 +22,58 @@ export function EditContigOverlay(props : EditContigOverlayProps) : JSX.Element
- - - - - + + + + +
-
- - - { +
+ + + + { - } - }} - /> - + } + }} + /> -
- - -
- - -
+
+ +
+ + +
-
+
+
+
); } \ No newline at end of file diff --git a/src/req/renderer/views/circularGenomeBuilderView/containers/overlays/editContigsOverlay.tsx b/src/req/renderer/views/circularGenomeBuilderView/containers/overlays/editContigsOverlay.tsx index b9f6891ff..d56398462 100644 --- a/src/req/renderer/views/circularGenomeBuilderView/containers/overlays/editContigsOverlay.tsx +++ b/src/req/renderer/views/circularGenomeBuilderView/containers/overlays/editContigsOverlay.tsx @@ -1,18 +1,19 @@ import * as React from "react"; -import { CircularFigure } from '../../../../circularFigure/circularFigure'; -import { Overlay } from './overlay'; -import { GridWrapper } from '../../../../containers/gridWrapper'; -import { Grid } from '../../../../components/grid'; -import { Typography } from '../../../../components/typography'; -import { TreeView } from '../../../../components/treeView'; -import { ChevronRight } from '../../../../components/icons/chevronRight'; -import { ExpandMore } from '../../../../components/icons/expandMore'; -import { blue } from '../../../../styles/colours'; -import { TreeItem } from '../../../../components/treeItem'; -import { AddBox } from '../../../../components/icons/addBox'; -import { getReferenceFromUuid } from '../../../../../uniquelyAddressable'; -import { EditContigOverlay } from "./editContigOverlay"; +import {CircularFigure} from "../../../../circularFigure/circularFigure"; +import {GridWrapper} from "../../../../containers/gridWrapper"; +import {Grid} from "../../../../components/grid"; +import {Typography} from "../../../../components/typography"; +import {TreeView} from "../../../../components/treeView"; +import {ChevronRight} from "../../../../components/icons/chevronRight"; +import {ExpandMore} from "../../../../components/icons/expandMore"; +import {blue} from "../../../../styles/colours"; +import {TreeItem} from "../../../../components/treeItem"; +import {AddBox} from "../../../../components/icons/addBox"; +import {getReferenceFromUuid} from "../../../../../uniquelyAddressable"; + +import {Overlay} from "./overlay"; +import {EditContigOverlay} from "./editContigOverlay"; export interface EditContigsOverlayProps { onClose: () => void; @@ -26,7 +27,8 @@ export interface EditContigsOverlayState { } export class EditContigsOverlay extends React.Component { - public constructor(props: EditContigsOverlayProps) { + public constructor(props: EditContigsOverlayProps) + { super(props); this.state = { @@ -34,7 +36,8 @@ export class EditContigsOverlay extends React.Component { contig ? { + onClose={() => + { this.setState({ selectedContigUuid: "" }); @@ -58,7 +62,7 @@ export class EditContigsOverlay extends React.Component : -
+
Edit Contigs @@ -67,21 +71,23 @@ export class EditContigsOverlay extends React.Component -
+
} - defaultCollapseIcon={} + defaultExpandIcon={} + defaultCollapseIcon={} > - + { - this.props.figure.contigs.map((contig, i) => { + this.props.figure.contigs.map((contig, i) => + { return ( { + onClick={() => + { this.setState({ selectedContigUuid: contig.uuid }); @@ -91,14 +97,14 @@ export class EditContigsOverlay extends React.Component - + } />