higlass

// @ts-nocheck import clsx from 'clsx'; import PropTypes from 'prop-types'; import React from 'react'; import AddTrackPositionMenu from './AddTrackPositionMenu'; import ConfigViewMenu from './ConfigViewMenu'; import ContextMenuContainer from './ContextMenuContainer'; import PopupMenu from './PopupMenu'; // HOCS import withTheme from './hocs/with-theme'; // Configs import { MOUSE_TOOL_SELECT, THEME_DARK, VIEW_HEADER_MED_WIDTH_SEARCH_BAR, VIEW_HEADER_MIN_WIDTH_SEARCH_BAR, } from './configs'; // Styles import classes from '../styles/ViewHeader.module.scss'; class ViewHeader extends React.Component { constructor(props) { super(props); this.configImg = null; this.plusImg = null; this.state = { addTrackPositionMenuUid: null, addTrackPositionMenuPosition: null, configMenuUid: null, configMenuPosition: null, isFocused: false, width: -1, }; this.handleTrackPositionChosenBound = this.handleTrackPositionChosen.bind(this); } componentDidMount() { this.setState({ width: this.el.clientWidth }); } checkWidth() { const width = this.el.clientWidth; if (width !== this.state.width) this.setState({ width }); } /** * The user clicked on the `cog` of the menu so we need to open * it. */ handleConfigMenuOpened(uid) { this.setState({ configMenuUid: uid, configMenuPosition: this.configImg.getBoundingClientRect(), }); } /** * The user has clicked on the 'plus' sign at the top of a TiledPlot * so we need to open the Track Position Chooser dialog */ handleAddTrackPositionMenuOpened(uid) { this.setState({ addTrackPositionMenuUid: uid, addTrackPositionMenuPosition: this.plusImg.getBoundingClientRect(), }); } /** * The user has chosen a position for the new track. The actual * track selection will be handled by TiledPlot * * We just need to close the menu here. */ handleTrackPositionChosen(position, extent) { this.props.onTrackPositionChosen(position, extent); this.setState({ addTrackPositionMenuUid: null, addTrackPositionMenuPosition: null, }); } render() { let configMenu = null; let addTrackPositionMenu = null; if (this.state.addTrackPositionMenuPosition) { addTrackPositionMenu = ( <PopupMenu onMenuClosed={() => { this.setState({ addTrackPositionMenuUid: null, addTrackPositionMenuPosition: null, }); }} > <ContextMenuContainer orientation="left" position={this.state.addTrackPositionMenuPosition} theme={this.props.theme} > <AddTrackPositionMenu onTrackPositionChosen={this.handleTrackPositionChosenBound} /> </ContextMenuContainer> </PopupMenu> ); } if (this.state.configMenuUid) { configMenu = ( <PopupMenu onMenuClosed={() => this.setState({ configMenuUid: null })}> <ConfigViewMenu onClearView={() => { this.setState({ configMenuUid: null }); // hide the menu this.props.onClearView(); }} onEditViewConfig={() => { this.setState({ configMenuUid: null }); // hide the menu this.props.onEditViewConfig(this.state.configMenuUid); }} onExportPNG={() => { this.setState({ configMenuUid: null }); // hide the menu this.props.onExportPNG(); }} onExportSVG={() => { this.setState({ configMenuUid: null }); // hide the menu this.props.onExportSVG(); }} onExportViewAsJSON={() => { this.setState({ configMenuUid: null }); // hide the menu this.props.onExportViewsAsJSON(); }} onExportViewAsLink={() => { this.setState({ configMenuUid: null }); // hide the menu this.props.onExportViewsAsLink(); }} onLockLocation={() => { this.setState({ configMenuUid: null }); // hide the menu this.props.onLockLocation(this.state.configMenuUid); }} onLockZoom={() => { this.setState({ configMenuUid: null }); // hide the menu this.props.onLockZoom(this.state.configMenuUid); }} onLockZoomAndLocation={() => { this.setState({ configMenuUid: null }); // hide the menu this.props.onLockZoomAndLocation(this.state.configMenuUid); }} onOptionsChanged={(newOptions) => { this.props.onViewOptionsChanged(newOptions); this.setState({ configMenuUid: null }); // hide the menu }} onProjectViewport={() => { this.setState({ configMenuUid: null }); // hide the menu this.props.onProjectViewport(this.state.configMenuUid); }} onTakeAndLockZoomAndLocation={() => { this.setState({ configMenuUid: null }); // hide the menu this.props.onTakeAndLockZoomAndLocation(this.state.configMenuUid); }} onTogglePositionSearchBox={() => { this.setState({ configMenuUid: null }); // hide the menu this.props.onTogglePositionSearchBox(this.state.configMenuUid); }} onUnlockLocation={() => { this.setState({ configMenuUid: null }); // hide the menu this.props.onUnlockLocation(this.state.configMenuUid); }} onUnlockZoom={() => { this.setState({ configMenuUid: null }); // hide the menu this.props.onUnlockZoom(this.state.configMenuUid); }} onUnlockZoomAndLocation={() => { this.setState({ configMenuUid: null }); // hide the menu this.props.onUnlockZoomAndLocation(this.state.configMenuUid); }} onYankLocation={() => { this.setState({ configMenuUid: null }); // hide the menu this.props.onYankLocation(this.state.configMenuUid); }} onYankZoom={() => { this.setState({ configMenuUid: null }); // hide the menu this.props.onYankZoom(this.state.configMenuUid); }} onYankZoomAndLocation={() => { this.setState({ configMenuUid: null }); // hide the menu this.props.onYankZoomAndLocation(this.state.configMenuUid); }} onZoomToData={() => { this.setState({ configMenuUid: null }); // hide the menu this.props.onZoomToData(this.state.configMenuUid); }} orientation="left" position={this.state.configMenuPosition} theme={this.props.theme} /> </PopupMenu> ); } const GenomePositionSearchBox = this.props.getGenomePositionSearchBox( this.state.isFocused, (focus) => { this.setState({ isFocused: focus, }); }, ); const className = clsx( this.state.isFocused ? classes['multitrack-header-focus'] : classes['multitrack-header'], { [classes['multitrack-header-dark']]: this.props.theme === THEME_DARK, }, ); const classNameIcon = this.state.width <= VIEW_HEADER_MED_WIDTH_SEARCH_BAR ? classes['multitrack-header-icon-squeazed'] : classes['multitrack-header-icon']; return ( <div ref={(c) => { this.el = c; }} className={className} > <div className={classes['multitrack-header-left']}> {this.props.mouseTool === MOUSE_TOOL_SELECT && ( <svg className={clsx(classes['mouse-tool-selection'], classNameIcon)} > <title>Selection tool active</title> <use xlinkHref="#select" /> </svg> )} <div className={classes['multitrack-header-grabber']} title="Drag to move the view" > <div /> <div /> <div /> </div> {this.state.width > VIEW_HEADER_MIN_WIDTH_SEARCH_BAR && ( <div className={classes['multitrack-header-search']}> {this.props.isGenomePositionSearchBoxVisible && GenomePositionSearchBox} </div> )} </div> <nav className={classes['multitrack-header-nav-list']}> <svg className={classNameIcon} onClick={this.props.onAddView}> <title>Add new view (clone this view)</title> <use xlinkHref="#copy" /> </svg> <svg ref={(c) => { this.configImg = c; }} className={classNameIcon} onClick={() => this.handleConfigMenuOpened(this.props.viewUid)} > <title>Configure this view</title> <use xlinkHref="#cog" /> </svg> <svg ref={(c) => { this.plusImg = c; }} className={classNameIcon} onClick={() => this.handleAddTrackPositionMenuOpened(this.props.viewUid) } data-testid="add-track" > <title>Add Track</title> <use xlinkHref="#plus" /> </svg> <svg className={classNameIcon} onClick={this.props.onCloseView}> <title>Close View</title> <use xlinkHref="#cross" /> </svg> </nav> {configMenu} {addTrackPositionMenu} </div> ); } } ViewHeader.defaultProps = { isGenomePositionSearchBoxVisible: false, }; ViewHeader.propTypes = { getGenomePositionSearchBox: PropTypes.func.isRequired, isGenomePositionSearchBoxVisible: PropTypes.bool, mouseTool: PropTypes.string.isRequired, onAddView: PropTypes.func.isRequired, onClearView: PropTypes.func.isRequired, onCloseView: PropTypes.func.isRequired, onEditViewConfig: PropTypes.func.isRequired, onExportSVG: PropTypes.func.isRequired, onExportPNG: PropTypes.func.isRequired, onExportViewsAsJSON: PropTypes.func.isRequired, onExportViewsAsLink: PropTypes.func.isRequired, onLockLocation: PropTypes.func.isRequired, onLockZoom: PropTypes.func.isRequired, onLockZoomAndLocation: PropTypes.func.isRequired, onProjectViewport: PropTypes.func.isRequired, onTakeAndLockZoomAndLocation: PropTypes.func.isRequired, onTogglePositionSearchBox: PropTypes.func.isRequired, onTrackPositionChosen: PropTypes.func.isRequired, onUnlockLocation: PropTypes.func.isRequired, onUnlockZoom: PropTypes.func.isRequired, onUnlockZoomAndLocation: PropTypes.func.isRequired, onViewOptionsChanged: PropTypes.func.isRequired, onYankLocation: PropTypes.func.isRequired, onYankZoom: PropTypes.func.isRequired, onYankZoomAndLocation: PropTypes.func.isRequired, onZoomToData: PropTypes.func.isRequired, theme: PropTypes.symbol.isRequired, viewUid: PropTypes.string.isRequired, }; export default withTheme(ViewHeader);