<commit_before>import React from 'react';

/*
We use Autodesk Molecule Viewer to display and navigate molecular data. Autodesk Molecule Viewer is not released under an open source license. For more information about the Autodesk Molecule Viewer license please refer to: https://molviewer.com/molviewer/docs/Pre-Release_Product_Testing_Agreement.pdf.
*/
import $ADSKMOLVIEW from 'tirrenu';

import loadImg from '../../img/loadAnim.gif';

require('../../css/view.scss');

const MOL_VIEW_INITIALIZED = 'viewerInitialized';
const MOL_VIEW_MODEL_LOADED = 'Nano.ModelEndLoaded';

class View extends React.Component {
  componentDidMount() {
    this.renderMoleculeViewer(
      this.props.modelData,
      null,
      this.props.selectionStrings,
      this.props.loading,
    );
  }

  componentWillReceiveProps(nextProps) {
    this.renderMoleculeViewer(
      nextProps.modelData,
      this.props.modelData,
      nextProps.selectionStrings,
      nextProps.loading,
    );
  }

  createMoleculeViewer() {
    this.moleculeViewer = new $ADSKMOLVIEW(this.moleculeViewerContainer, {
      headless: true,
    });

    return new Promise((resolve) => {
      const molViewInitialized = () => {
        if (this.moleculeViewer) {
          this.moleculeViewer.mv.removeEventListener(
            MOL_VIEW_INITIALIZED, molViewInitialized,
          );
        }
        resolve();
      };

      this.moleculeViewer.mv.addEventListener(
        MOL_VIEW_INITIALIZED, molViewInitialized,
      );
    });
  }

  addModelToMoleculeViewer(modelData) {
    return new Promise((resolve) => {
      const molViewModelLoaded = () => {
        if (this.moleculeViewer) {
          this.moleculeViewer.mv.removeEventListener(
            MOL_VIEW_MODEL_LOADED, molViewModelLoaded,
          );
        }
        resolve();
      };

      this.moleculeViewer.mv.addEventListener(
        MOL_VIEW_MODEL_LOADED, molViewModelLoaded,
      );
      this.moleculeViewer.createMoleculeFromFile(modelData, 'pdb');
    });
  }

  renderMoleculeViewer(modelData, oldModelData, selectionStrings, loading) {
    let createMoleculeViewerPromise = Promise.resolve();

    // Create or destroy the molviewer when needed
    if ((loading || !modelData) && this.moleculeViewer) {
      // TODO the molviewer api should provide a better way to destroy itself
      document.querySelector('.adsk-viewing-viewer').remove();
      this.moleculeViewer = undefined;
    } else if (modelData && !this.moleculeViewer) {
      createMoleculeViewerPromise = this.createMoleculeViewer();
    }

    // Update the model whenever it's different than last render
    if (modelData && this.moleculeViewer) {
      createMoleculeViewerPromise.then(() => {
        let addModelPromise = Promise.resolve();
        if (modelData !== oldModelData) {
          addModelPromise = this.addModelToMoleculeViewer(modelData);
        }

        addModelPromise.then(() => {
          if (selectionStrings) {
            this.moleculeViewer.clearSelection();
            selectionStrings.forEach(selectionString =>
              this.moleculeViewer.select(selectionString),
            );
            this.moleculeViewer.focusOnSelection();
          }
        });
      });
    }

    // TODO colorized like: this.moleculeViewer.setColor('ribbon', 'blue', '1');
  }

  render() {
    let view;
    if (this.props.error) {
      view = (<commit_msg>Prevent trying to clear selection on a non-existent moleculeViewer<commit_after>import React from 'react';

/*
We use Autodesk Molecule Viewer to display and navigate molecular data. Autodesk Molecule Viewer is not released under an open source license. For more information about the Autodesk Molecule Viewer license please refer to: https://molviewer.com/molviewer/docs/Pre-Release_Product_Testing_Agreement.pdf.
*/
import $ADSKMOLVIEW from 'tirrenu';

import loadImg from '../../img/loadAnim.gif';

require('../../css/view.scss');

const MOL_VIEW_INITIALIZED = 'viewerInitialized';
const MOL_VIEW_MODEL_LOADED = 'Nano.ModelEndLoaded';

class View extends React.Component {
  componentDidMount() {
    this.renderMoleculeViewer(
      this.props.modelData,
      null,
      this.props.selectionStrings,
      this.props.loading,
    );
  }

  componentWillReceiveProps(nextProps) {
    this.renderMoleculeViewer(
      nextProps.modelData,
      this.props.modelData,
      nextProps.selectionStrings,
      nextProps.loading,
    );
  }

  createMoleculeViewer() {
    this.moleculeViewer = new $ADSKMOLVIEW(this.moleculeViewerContainer, {
      headless: true,
    });

    return new Promise((resolve) => {
      const molViewInitialized = () => {
        if (this.moleculeViewer) {
          this.moleculeViewer.mv.removeEventListener(
            MOL_VIEW_INITIALIZED, molViewInitialized,
          );
        }
        resolve();
      };

      this.moleculeViewer.mv.addEventListener(
        MOL_VIEW_INITIALIZED, molViewInitialized,
      );
    });
  }

  addModelToMoleculeViewer(modelData) {
    return new Promise((resolve) => {
      const molViewModelLoaded = () => {
        if (this.moleculeViewer) {
          this.moleculeViewer.mv.removeEventListener(
            MOL_VIEW_MODEL_LOADED, molViewModelLoaded,
          );
        }
        resolve();
      };

      this.moleculeViewer.mv.addEventListener(
        MOL_VIEW_MODEL_LOADED, molViewModelLoaded,
      );
      this.moleculeViewer.createMoleculeFromFile(modelData, 'pdb');
    });
  }

  renderMoleculeViewer(modelData, oldModelData, selectionStrings, loading) {
    let createMoleculeViewerPromise = Promise.resolve();

    // Create or destroy the molviewer when needed
    if ((loading || !modelData) && this.moleculeViewer) {
      // TODO the molviewer api should provide a better way to destroy itself
      document.querySelector('.adsk-viewing-viewer').remove();
      this.moleculeViewer = undefined;
    } else if (modelData && !this.moleculeViewer) {
      createMoleculeViewerPromise = this.createMoleculeViewer();
    }

    // Update the model whenever it's different than last render
    if (modelData && this.moleculeViewer) {
      createMoleculeViewerPromise.then(() => {
        let addModelPromise = Promise.resolve();
        if (modelData !== oldModelData) {
          addModelPromise = this.addModelToMoleculeViewer(modelData);
        }

        addModelPromise.then(() => {
          if (this.moleculeViewer && selectionStrings) {
            this.moleculeViewer.clearSelection();
            selectionStrings.forEach(selectionString =>
              this.moleculeViewer.select(selectionString),
            );
            this.moleculeViewer.focusOnSelection();
          }
        }).catch(console.error.bind(console));
      }).catch(console.error.bind(console));
    }

    // TODO colorized like: this.moleculeViewer.setColor('ribbon', 'blue', '1');
  }

  render() {
    let view;
    if (this.props.error) {
      view = (
{'fraction_non_alphanumeric': 0.1070398153491056, 'fraction_numerical': 0.00028851702250432774, 'mean_word_length': 2.8367459878251244, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 17, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2747027', 'n_tokens_mistral': 2110, 'n_tokens_neox': 2009, 'n_words': 383}