import { makeObservable , observable } from "mobx" ; import { observer } from "mobx-react" ; import React from "react" ; import { Button , ButtonGroup , ButtonToolbar , FormControl , FormGroup , Glyphicon , InputGroup , Navbar } from "react-bootstrap" ; import aboutSvg from '../images/toolbar/about.svg' ; import ahbSvg from '../images/toolbar/align/align-horizontal-bottom.svg' ; import ahmSvg from '../images/toolbar/align/align-horizontal-middle.svg' ; import ahtSvg from '../images/toolbar/align/align-horizontal-top.svg' ; import avcSvg from '../images/toolbar/align/align-vertical-center.svg' ; import avlSvg from '../images/toolbar/align/align-vertical-left.svg' ; import avrSvg from '../images/toolbar/align/align-vertical-right.svg' ; import deleteSvg from '../images/toolbar/delete-simple.svg' ; import gridSvg from '../images/toolbar/grid.svg' ; import guideSvg from '../images/toolbar/guidelines.svg' ; import hideSvg from '../images/toolbar/hide-selected.svg' ; import layoutSvg from '../images/toolbar/layout-cose.svg' ; import layoutPropSvg from '../images/toolbar/layout-properties.svg' ; import loadSvg from '../images/toolbar/load.svg' ; import newSvg from '../images/toolbar/new.svg' ; import portalSvg from '../images/toolbar/portal.svg' ; import helpSvg from '../images/toolbar/quick-help.svg' ; import redoSvg from '../images/toolbar/redo.svg' ; import saveSvg from '../images/toolbar/save.svg' ; import setingsSvg from '../images/toolbar/settings.svg' ; import showSvg from '../images/toolbar/show-all.svg' ; import undoSvg from '../images/toolbar/undo.svg' ; import { EGridType } from "../modals/GridSettings" ; import PathwayActions from "../utils/PathwayActions" ; import { EModalType } from "./react-pathway-mapper" ; interface IButtonbarProps { pathwayActions : PathwayActions ; handleOpen : ( modelId : EModalType ) => void ; } interface ISVGFunction { svg : any ; function : ( ) => void ; tooltip : string ; isFocused ? : boolean ; } @ observer export default class Buttonbar extends React . Component < IButtonbarProps , { } > { @ observable private searchedGene : string ; constructor ( props ) { super ( props ) ; makeObservable ( this ) ; this . searchedGene = "" ; this . props . pathwayActions . enabledType = EGridType . NONE ; } setEnabledType ( newType ) { if ( newType === this . props . pathwayActions . enabledType ) { this . props . pathwayActions . enabledType = EGridType . NONE ; } else { this . props . pathwayActions . enabledType = newType ; } if ( this . props . pathwayActions . enabledType === EGridType . GRID ) { this . props . pathwayActions . toggleGrid ( true ) ; } else if ( this . props . pathwayActions . enabledType === EGridType . GUIDE ) { this . props . pathwayActions . toggleGuide ( true ) ; } else { this . props . pathwayActions . toggleGrid ( false ) ; } } render ( ) { const fileFunctions = [ { svg : newSvg , function : this . props . pathwayActions . newPathway , tooltip : "New Pathway" } , { svg : loadSvg , function : this . props . pathwayActions . upload , tooltip : "Import Pathway" } , { svg : saveSvg , function : ( ) => { this . props . pathwayActions . export ( false ) ; } , tooltip : "Export Pathway" } ] ; const modFunctions = [ { svg : deleteSvg , function : this . props . pathwayActions . deleteSelected , tooltip : "Delete Selected" } ] ; if ( ! this . props . pathwayActions . isCollaborative ) { modFunctions . push ( { svg : undoSvg , function : ( ) => { this . props . pathwayActions . undo ( ) ; } , tooltip : "Undo" } , { svg : redoSvg , function : ( ) => { this . props . pathwayActions . redo ( ) ; } , tooltip : "Redo" } ) ; } const alignFunctions = [ { svg : ahtSvg , function : ( ) => { this . props . pathwayActions . align ( "hTop" ) ; } , tooltip : "Align Horizontal Top" } , { svg : ahmSvg , function : ( ) => { this . props . pathwayActions . align ( "hMid" ) ; } , tooltip : "Align Horizontal Middle" } , { svg : ahbSvg , function : ( ) => { this . props . pathwayActions . align ( "hBot" ) ; } , tooltip : "Align Horizontal Bottom" } , { svg : avlSvg , function : ( ) => { this . props . pathwayActions . align ( "vLeft" ) ; } , tooltip : "Align Vertical Left" } , { svg : avcSvg , function : ( ) => { this . props . pathwayActions . align ( "vCen" ) ; } , tooltip : "Align Vertical Center" } , { svg : avrSvg , function : ( ) => { this . props . pathwayActions . align ( "vRight" ) ; } , tooltip : "Align Vertical Right" } ] ; const utilFunctions = [ { isFocused : this . props . pathwayActions . enabledType === EGridType . GRID , svg : gridSvg , function : ( ) => { this . setEnabledType ( EGridType . GRID ) ; } , tooltip : "Enable Grid: Show and snap to grid" } , { isFocused : this . props . pathwayActions . enabledType === EGridType . GUIDE , svg : guideSvg , function : ( ) => { this . setEnabledType ( EGridType . GUIDE ) ; } , tooltip : "Enable Guidelines: Enable and snap to alignment guidelines" } ] ; const visibilityFunctions = [ { svg : hideSvg , function : ( ) => { this . props . pathwayActions . hideSelected ( ) ; } , tooltip : "Hide Selected" } , { svg : showSvg , function : ( ) => { this . props . pathwayActions . showAll ( ) ; } , tooltip : "Show All" } ] ; const layoutFunctions = [ { svg : layoutSvg , function : ( ) => { this . props . pathwayActions . performLayout ( ) ; } , tooltip : "Perform Layout" } , { svg : layoutPropSvg , function : ( ) => { this . props . handleOpen ( EModalType . LAYOUT ) ; } , tooltip : "Layout Properties" } ] ; const portalFunctions = [ { svg : portalSvg , function : ( ) => { this . props . handleOpen ( EModalType . STUDY ) ; } , tooltip : "Fetch Genomic Data From cBioPortal" } , { svg : setingsSvg , function : ( ) => { this . props . handleOpen ( EModalType . PROFILES ) ; } , tooltip : "Genomic Data Visibility Settings" } ] ; const infoFunctions = [ { svg : helpSvg , function : ( ) => { this . props . handleOpen ( EModalType . HELP ) ; } , tooltip : "Quick Help" } , { svg : aboutSvg , function : ( ) => { this . props . handleOpen ( EModalType . ABOUT ) ; } , tooltip : "About" } ] ; const allFunctions = [ fileFunctions , modFunctions , alignFunctions , utilFunctions , visibilityFunctions , portalFunctions , layoutFunctions , infoFunctions ] ; return ( < Navbar fluid style = { { backgroundColor : "#eff0f2" , minHeight : "0px" } } className = "pathway-toolbar" > < ButtonToolbar className = "toolbar pathway-toolbar" style = { { marginBottom : "0px" , paddingBottom : "0px" } } > { allFunctions . map ( ( functions , index ) => < ButtonGroup key = { index } > { functions . map ( ( svg , index ) => ( < Button key = { index } className = { "toolbar-button" + ( ( svg . isFocused ? " toolbar-button-focused" : "" ) ) } style = { { padding : 0 } } > < img height = "22px" width = "22px" src = { svg . svg } data - tip = { svg . tooltip } data - place = "bottom" data - effect = "solid" onClick = { svg . function } > < /img> < /Button>))} < /ButtonGroup>)} < ButtonGroup id = "searchGeneToolbar" > < FormGroup > < InputGroup > < FormControl id = "searchGene" type = "text" style = { { maxHeight : '32px' , borderTopRightRadius : 0 , borderBottomRightRadius : 0 } } onChange = { ( e ) => { this . searchedGene = e . target . value ; } } placeholder = "Search Genes..." onKeyPress = { ( e ) => { if ( e . key !== "Enter" ) return ; this . props . pathwayActions . searchGene ( this . searchedGene ) ; } } /> < InputGroup . Addon id = "search-gene-input-group-addon" onClick = { ( ) => { this . props . pathwayActions . searchGene ( this . searchedGene ) ; } } style = { { cursor : 'pointer' } } > < Glyphicon glyph = "search" / > < /InputGroup.Addon> < /InputGroup> < /FormGroup> < /ButtonGroup> < /ButtonToolbar> < /Navbar>); } }