AnnotationEditor

Source

index.js

import React from 'react';
import PropTypes from 'prop-types';

import style from 'PVWStyle/ReactWidgets/ToggleTools.mcss';

import AnnotationEditorWidget from '../../Widgets/AnnotationEditorWidget';
import OverlayWindow from '../../Containers/OverlayWindow';
import SvgIconWidget from '../../Widgets/SvgIconWidget';

import OverlayTitleBar from '../../Widgets/OverlayTitleBar';
import icon from '../../../../svg/Buttons/Annotation.svg';

export default class AnnotationEditorTool extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      overlayVisible: false,
      ranges: {},
      annotation: null,
    };

    this.title = 'Annotation Editor';

    // Get some fields selected
    props.provider.getFieldNames().forEach((name) => {
      this.state.ranges[name] = props.provider.getField(name).range;
    });

    // Autobinding
    this.toggleOverlay = this.toggleOverlay.bind(this);
    this.onAnnotationChange = this.onAnnotationChange.bind(this);
  }

  componentWillMount() {
    this.subscription = this.props.provider.onAnnotationChange((annotation) => {
      this.setState({ annotation });
    });
    const annotation = this.props.provider.getAnnotation();
    this.setState({ annotation });
  }

  componentWillUnmount() {
    this.subscription.unsubscribe();
  }

  onAnnotationChange(annotation, isEditDone) {
    if (this.state.annotation && this.state.annotation.readOnly) {
      return;
    }
    this.setState({ annotation });
    if (isEditDone) {
      this.props.provider.setAnnotation(annotation);
    }
  }

  toggleOverlay() {
    const overlayVisible = !this.state.overlayVisible;
    if (overlayVisible) {
      this.props.onActiveWindow(this);
    }
    this.setState({ overlayVisible });
  }

  render() {
    return (
      <div className={style.container}>
        <div title={this.title}>
          <SvgIconWidget
            width={this.props.size}
            height={this.props.size}
            icon={icon}
            className={this.state.overlayVisible ? style.iconOff : style.iconOn}
            onClick={() => this.toggleOverlay()}
          />
        </div>
        <OverlayWindow
          title={
            <OverlayTitleBar
              title={this.title}
              onClose={() => this.toggleOverlay()}
            />
          }
          x={500}
          y={80}
          visible={this.state.overlayVisible}
          minContentWidth={460}
          minContentHeight={265}
          width={470}
          height={300}
          onActive={() => this.props.onActiveWindow(this)}
          front={this === this.props.activeWindow}
        >
          <div
            style={{
              overflow: 'auto',
              position: 'absolute',
              width: '100%',
              height: '100%',
            }}
          >
            <AnnotationEditorWidget
              annotation={this.state.annotation}
              scores={this.props.provider.getScores()}
              ranges={this.state.ranges}
              onChange={this.onAnnotationChange}
              getLegend={this.props.provider.getLegend}
              showUncertainty={this.props.showUncertainty}
            />
          </div>
        </OverlayWindow>
      </div>
    );
  }
}

AnnotationEditorTool.propTypes = {
  provider: PropTypes.object.isRequired,
  size: PropTypes.string,
  showUncertainty: PropTypes.bool,

  activeWindow: PropTypes.object,
  onActiveWindow: PropTypes.func,
};

AnnotationEditorTool.defaultProps = {
  size: '35px',
  showUncertainty: true,
  activeWindow: null,
  onActiveWindow: null,
};