import React from 'react' ; import { EModalType } from '../ui/react-pathway-mapper' ; import { Modal } from 'react-bootstrap' ; interface IQuickHelpModalProps { show : boolean ; handleClose : ( modalId : EModalType ) => void ; } export default class QuickHelpModal extends React . Component < IQuickHelpModalProps > { constructor ( props ) { super ( props ) ; } render ( ) { return ( < Modal id = "quickHelpModal" show = { this . props . show } onHide = { ( ) => { this . props . handleClose ( EModalType . HELP ) ; } } > < Modal . Header closeButton > < Modal . Title > Quick Help < /Modal.Title> < /Modal.Header> < Modal . Body > < ul className = "leftText" > < li > < strong > To add a node : < /strong> Drag and drop from node palette</li > < li > < strong > To add an interaction : < /strong> Click on interaction type; then click on small circle on source node and release on target node</li > < li > < strong > To add a node into a container ( family , complex , compartment or process ) : < /strong> Drag the node into its container node or select nodes to be contained and right click on container node and choose "Add Selected Into This"</li > < li > < strong > To delete nodes / interactions : < /strong> Select and perform Edit &gt; Delete Selected</li > < li > < strong > To overlay experiment data : < /strong> Select Alteration % &gt; Load From cBioPortal...</li > < /ul> < /Modal.Body> < /Modal>); } }