ParallelCoordinates

Source

index.js

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

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

import ComponentToReact from '../../../Component/React/ComponentToReact';
import ParallelCoordinates from '../../../InfoViz/Native/ParallelCoordinates';
import OverlayWindow from '../../Containers/OverlayWindow';
import SvgIconWidget from '../../Widgets/SvgIconWidget';

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

const isSame = (array1, array2) =>
  array1.length === array2.length &&
  array1.every((element, index) => element === array2[index]);

export default class ParallelCoordinatesTool extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      overlayVisible: false,
    };

    this.title = 'Parallel Coordinates';

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

  componentWillMount() {
    this.component = ParallelCoordinates.newInstance({
      provider: this.props.provider,
    });
    this.component.propagateAnnotationInsteadOfSelection(true, 0, 1);
    this.component.setVisibleScoresForSelection(this.props.partitionScores);
    this.component.setShowOnlySelection(!!this.props.showOnlySelection);
  }

  componentDidUpdate() {
    let changeDetected = false;

    if (
      !isSame(this.component.getVisibleScores(), this.props.partitionScores)
    ) {
      this.component.setVisibleScoresForSelection(this.props.partitionScores);
      changeDetected = true;
    }

    if (
      this.component.getShowOnlySelection() !== !!this.props.showOnlySelection
    ) {
      this.component.setShowOnlySelection(!!this.props.showOnlySelection);
      changeDetected = true;
    }

    if (changeDetected) {
      this.component.render();
    }
  }

  componentWillUnmount() {
    this.component.destroy();
  }

  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={20}
          y={390}
          visible={this.state.overlayVisible}
          minContentWidth={460}
          minContentHeight={265}
          width={470}
          height={300}
          onResize={() => this.component.resize()}
          onActive={() => this.props.onActiveWindow(this)}
          front={this === this.props.activeWindow}
        >
          <div
            style={{
              overflow: 'auto',
              position: 'absolute',
              width: '100%',
              height: '100%',
            }}
          >
            <ComponentToReact
              className={style.fullSize}
              component={this.component}
            />
          </div>
        </OverlayWindow>
      </div>
    );
  }
}

ParallelCoordinatesTool.propTypes = {
  provider: PropTypes.object.isRequired,
  size: PropTypes.string,

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

  showOnlySelection: PropTypes.bool,
  partitionScores: PropTypes.array,
};

ParallelCoordinatesTool.defaultProps = {
  size: '35px',
  showOnlySelection: false,
  partitionScores: [0, 1, 2],
  activeWindow: null,
  onActiveWindow: null,
};