<commit_before>import _ from 'lodash';
import React, { PureComponent } from 'react';
import { DataSource, Plugin } from 'app/types/';
import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';

interface Props {
  dataSource: DataSource;
  dataSourceMeta: Plugin;
}

export class PluginSettings extends PureComponent<Props> {
  element: any;
  component: AngularComponent;

  componentDidMount() {
    const { dataSource, dataSourceMeta } = this.props;

    if (!this.element) {
      return;
    }

    const loader = getAngularLoader();
    const template = '<plugin-component type="datasource-config-ctrl" />';
    const scopeProps = {
      ctrl: {
        datasourceMeta: dataSourceMeta,
        current: _.cloneDeep(dataSource),
      },
      onModelChanged: this.onModelChanged,
    };

    this.component = loader.load(this.element, scopeProps, template);
  }

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

  onModelChanged(dataSource: DataSource) {
    console.log(dataSource);
  }

  render() {
    return <div ref={element => (this.element = element)} />;
  }
}

export default PluginSettings;<commit_msg>update angular state on props update<commit_after>import _ from 'lodash';
import React, { PureComponent } from 'react';
import { DataSource, Plugin } from 'app/types/';
import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';

interface Props {
  dataSource: DataSource;
  dataSourceMeta: Plugin;
}

export class PluginSettings extends PureComponent<Props> {
  element: any;
  component: AngularComponent;
  scopeProps: any;

  constructor(props) {
    super(props);

    this.scopeProps = {
      ctrl: {
        datasourceMeta: this.props.dataSourceMeta,
        current: this.props.dataSource,
      },
      onModelChanged: this.onModelChanged,
    };
  }

  componentDidUpdate() {
    this.scopeProps.ctrl.current = this.props.dataSource;
  }

  componentDidMount() {
    if (!this.element) {
      return;
    }

    const loader = getAngularLoader();
    const template = '<plugin-component type="datasource-config-ctrl" />';

    this.component = loader.load(this.element, this.scopeProps, template);
  }

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

  onModelChanged(dataSource: DataSource) {
    console.log(dataSource);
  }

  render() {
    return <div ref={element => (this.element = element)} />;
  }
}

export default PluginSettings;
{'fraction_non_alphanumeric': 0.12172878667724028, 'fraction_numerical': 0.0, 'mean_word_length': 3.4813499111900534, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 11, 'https://': 0, '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': '5009985', 'n_tokens_mistral': 782, 'n_tokens_neox': 742, 'n_words': 160}