import React from 'react' ; import { MenuItem , Nav , Navbar , NavDropdown } from 'react-bootstrap' ; import pathways from "../data/pathways.json" ; import ConfirmationModal from '../modals/ConfirmationModal' ; import PathwayActions from '../utils/PathwayActions' ; import { EModalType } from './react-pathway-mapper' ; interface IMenubarProps { pathwayActions : PathwayActions ; handleOpen : ( modalId : EModalType ) => void ; setActiveEdge : Function ; } export default class Menubar extends React . Component < IMenubarProps , { } > { constructor ( props ) { super ( props ) ; } render ( ) { const nodeTypes = [ "Gene" , "Family" , "Complex" , "Compartment" , "Process" ] ; const edgeTypes = [ "Activates" , "Inhibits" , "Induces" , "Represses" , "Binds" ] ; const pathwayDropdownData = { } ; for ( const pwName of Object . keys ( pathways ) ) { const isPancanatlas = ! pwName . includes ( 'pathway' ) ; const dashPos = pwName . indexOf ( '-' ) ; const pwHead = ( isPancanatlas ) ? 'PanCanAtlas' : pwName . substring ( 0 , dashPos ) ; if ( pwHead in pathwayDropdownData ) { pathwayDropdownData [ pwHead ] . push ( pwName ) ; } else { pathwayDropdownData [ pwHead ] = [ pwName ] ; } } return ( < Navbar className = "pathway-navbar" > < Nav > < NavDropdown eventKey = { 1 } title = "Network" id = "basic-nav-network" > < MenuItem eventKey = { 1.1 } onClick = { this . props . pathwayActions . newPathway } > New < /MenuItem> < MenuItem eventKey = { 1.1 } onClick = { ( ) => { this . props . handleOpen ( EModalType . PW_DETAILS ) ; } } > Properties ... < /MenuItem> < MenuItem eventKey = { 1.1 } onClick = { ( ) => { this . props . pathwayActions . upload ( ) ; } } > Import < /MenuItem> < NavDropdown className = "dropdown-submenu" eventKey = { 1 } title = "TCGA" id = "basic-nav-TCGA" > { Object . keys ( pathwayDropdownData ) . map ( ( pwHead , index ) => { return ( < NavDropdown key = { index } id = { pwHead + "_dropdown" } className = "dropdown-submenu" eventKey = { 1 } title = { pwHead } > { pathwayDropdownData [ pwHead ] . map ( ( pwName , index ) => < MenuItem key = { index } onClick = { ( ) => { if ( this . props . pathwayActions . doesCyHaveElements ( ) ) { this . props . handleOpen ( EModalType . CONFIRMATION ) ; ConfirmationModal . pendingFunction = ( ) => { this . props . pathwayActions . changePathway ( pwName ) ; } ; } else { this . props . pathwayActions . changePathway ( pwName ) ; } } } > { pwName . split ( '-' ) . join ( " " ) } < /MenuItem>)} < /NavDropdown>); } ) } < /NavDropdown> < MenuItem eventKey = { 1.1 } onClick = { ( ) => { this . props . pathwayActions . merge ( ) ; } } > Merge With ... < /MenuItem> < MenuItem eventKey = { 1.1 } onClick = { ( ) => { this . props . pathwayActions . export ( false ) ; } } > Export < /MenuItem> < NavDropdown className = "dropdown-submenu" eventKey = { 1 } title = "Export as" id = "basic-nav-export" > < MenuItem eventKey = { 1.1 } onClick = { ( ) => { this . props . pathwayActions . saveAs ( "JPEG" ) ; } } > JPEG < /MenuItem> < MenuItem eventKey = { 1.1 } onClick = { ( ) => { this . props . pathwayActions . saveAs ( "PNG" ) ; } } > PNG < /MenuItem> < MenuItem eventKey = { 1.1 } onClick = { ( ) => { this . props . pathwayActions . saveAs ( "SVG" ) ; } } > SVG < /MenuItem> < MenuItem eventKey = { 1.1 } onClick = { ( ) => { this . props . pathwayActions . export ( true ) ; } } > SIFNX < /MenuItem> < /NavDropdown> < /NavDropdown> < NavDropdown eventKey = { 2 } title = "Edit" id = "basic-nav-edit" > < NavDropdown id = "add-node-submenu" className = "dropdown-submenu" eventKey = { 2.1 } title = "Add Node" > { nodeTypes . map ( ( nodeType , index ) => { return ( < MenuItem key = { index } onClick = { ( ) => { this . props . pathwayActions . addNode ( nodeType ) ; } } > { nodeType } < /MenuItem>); } ) } < /NavDropdown> < NavDropdown id = "add-edge-submenu" className = "dropdown-submenu" eventKey = { 2.1 } title = "Add Edge" > { edgeTypes . map ( ( nodeType , i ) => { return ( < MenuItem key = { i } onClick = { ( ) => { this . props . pathwayActions . addEdge ( i ) ; this . props . setActiveEdge ( i ) ; } } > { nodeType } < /MenuItem>); } ) } < /NavDropdown> < MenuItem eventKey = { 1.1 } onClick = { ( ) => { this . props . pathwayActions . deleteSelected ( ) ; } } > Delete Selected < /MenuItem> < MenuItem eventKey = { 1.1 } onClick = { ( ) => { this . props . pathwayActions . resizeToContent ( ) ; } } > Resize Nodes to Content < /MenuItem> { ! this . props . pathwayActions . isCollaborative && < React . Fragment > < MenuItem eventKey = { 1.1 } onClick = { ( ) => { this . props . pathwayActions . undo ( ) ; } } > Undo < /MenuItem> < MenuItem eventKey = { 1.1 } onClick = { ( ) => { this . props . pathwayActions . redo ( ) ; } } > Redo < /MenuItem> < /React.Fragment>} < /NavDropdown> < NavDropdown eventKey = { 3 } title = "View" id = "basic-nav-view" > < NavDropdown id = "align-view-submenu" className = "dropdown-submenu" eventKey = { 2.1 } title = "Align Selected" > < NavDropdown id = "align-vertical-submenu" className = "dropdown-submenu" eventKey = { 2.1 } title = "Vertical" > < MenuItem eventKey = { 1.1 } onClick = { ( ) => { this . props . pathwayActions . align ( "vLeft" ) ; } } > Left < /MenuItem> < MenuItem eventKey = { 1.1 } onClick = { ( ) => { this . props . pathwayActions . align ( "vCen" ) ; } } > Center < /MenuItem> < MenuItem eventKey = { 1.1 } onClick = { ( ) => { this . props . pathwayActions . align ( "vRight" ) ; } } > Right < /MenuItem> < /NavDropdown> < NavDropdown id = "align-horizontal-submenu" className = "dropdown-submenu" eventKey = { 2.1 } title = "Horizontal" > < MenuItem eventKey = { 1.1 } onClick = { ( ) => { this . props . pathwayActions . align ( "hTop" ) ; } } > Top < /MenuItem> < MenuItem eventKey = { 1.1 } onClick = { ( ) => { this . props . pathwayActions . align ( "hMid" ) ; } } > Middle < /MenuItem> < MenuItem eventKey = { 1.1 } onClick = { ( ) => { this . props . pathwayActions . align ( "hBot" ) ; } } > Bottom < /MenuItem> < /NavDropdown> < /NavDropdown> < MenuItem eventKey = { 1.1 } onClick = { ( ) => { this . props . handleOpen ( EModalType . GRID ) ; } } > Grid ... < /MenuItem> < MenuItem eventKey = { 1.1 } onClick = { ( ) => { this . props . pathwayActions . hideSelected ( ) ; } } > Hide Selected Nodes < /MenuItem> < MenuItem eventKey = { 1.1 } onClick = { ( ) => { this . props . pathwayActions . showAll ( ) ; } } > Show All Nodes < /MenuItem> < /NavDropdown> < NavDropdown eventKey = { 4 } title = "Highlight" id = "basic-nav-highlight" > < MenuItem eventKey = { 4.1 } onClick = { this . props . pathwayActions . highlightSelected } > Highlight Selected < /MenuItem> < MenuItem eventKey = { 4.1 } onClick = { this . props . pathwayActions . highlightNeighbours } > Highlight Neighbors Of Selected < /MenuItem> < MenuItem eventKey = { 4.1 } onClick = { this . props . pathwayActions . validateGenes } > Identify Invalid Genes < /MenuItem> < MenuItem eventKey = { 4.1 } onClick = { this . props . pathwayActions . removeAllHighlight } > Remove All Highlights < /MenuItem> < /NavDropdown> < NavDropdown eventKey = { 5 } title = "Alteration %" id = "basic-nav-alteration" > < MenuItem eventKey = { 5.1 } onClick = { this . props . pathwayActions . loadSampleData } > Load Sample Data < /MenuItem> < MenuItem eventKey = { 5.1 } onClick = { ( ) => { this . props . pathwayActions . uploadOverlay ( ) ; } } > Load From File ... < /MenuItem> < MenuItem eventKey = { 5.1 } onClick = { ( ) => { this . props . handleOpen ( EModalType . STUDY ) ; } } > Load From cBioPortal ... < /MenuItem> < MenuItem eventKey = { 5.1 } onClick = { ( ) => { this . props . handleOpen ( EModalType . PROFILES ) ; } } > Data Sets ... < /MenuItem> < MenuItem eventKey = { 5.1 } onClick = { ( ) => { this . props . handleOpen ( EModalType . PROFILES_COLOR_SCHEME ) ; } } > Color Scheme ... < /MenuItem> < MenuItem eventKey = { 5.1 } onClick = { this . props . pathwayActions . removeAllData } > Remove All Data < /MenuItem> < /NavDropdown> < NavDropdown eventKey = { 6 } title = "Layout" id = "basic-nav-layout" > < MenuItem eventKey = { 6.1 } onClick = { this . props . pathwayActions . performLayout } > Perform Layout < /MenuItem> < MenuItem eventKey = { 6.1 } onClick = { ( ) => { this . props . handleOpen ( EModalType . LAYOUT ) ; } } > Layout Properties ... < /MenuItem> < /NavDropdown> < NavDropdown eventKey = { 7 } title = "Help" id = "basic-nav-help" > < MenuItem eventKey = { 7.1 } onClick = { ( ) => { this . props . handleOpen ( EModalType . HELP ) ; } } > Quick Help < /MenuItem> < MenuItem eventKey = { 7.1 } onClick = { ( ) => { window . open ( "https://github.com/iVis-at-Bilkent/pathway-mapper" ) ; } } > How To Use < /MenuItem> < MenuItem eventKey = { 7.1 } onClick = { ( ) => { this . props . handleOpen ( EModalType . ABOUT ) ; } } > About < /MenuItem> < /NavDropdown> < /Nav> < Nav pullRight > < Navbar . Brand > < a href = "#" > PathwayMapper < /a> < /Navbar.Brand> < /Nav> < /Navbar>); } }