<commit_before>import React from 'react';
import PropTypes from 'prop-types';
import { Autobind } from 'es-decorators';
import { toastr } from 'react-redux-toastr';
import Graph from 'react-graph-vis';

// Components
import Spinner from 'components/ui/Spinner';
import Field from 'components/form/Field';
import Select from 'components/form/SelectInput';

// Services
import GraphService from 'services/GraphService';

const graphOptions = {
  height: '100%',
  layout: {
    hierarchical: false
  },
  edges: {
    color: '#000000'
  }
};

class TagsForm extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      tags: [],
      selectedTags: [],
      inferredTags: [],
      graph: null,
      loading: true,
      loadingInferredTags: false
    };

    this.graphService = new GraphService({ apiURL: process.env.WRI_API_URL });
  }

  /**
   * COMPONENT LIFECYCLE
   * - componentDidMount
  */
  componentDidMount() {
    this.loadAllTags();
    this.loadKnowledgeGraph();
    this.loadDatasetTags();
  }

  loadDatasetTags() {
    this.graphService.getDatasetTags(this.props.dataset)
      .then((response) => {
        const knowledgeGraphVoc = response.find(elem => elem.id === 'knowledge_graph');
        const datasetTags = knowledgeGraphVoc ? knowledgeGraphVoc.attributes.tags : [];
        this.setState({
          selectedTags: datasetTags
        }, () => this.loadInferredTags());
      })
      .catch((err) => {
        toastr.error('Error loading the dataset tags');
        console.error(err);
      });
  }

  loadKnowledgeGraph() {
    // Topics selector
    fetch(new Request('/static/data/KnowledgeGraph.json', { credentials: 'same-origin' }))
      .then(response => response.json())
      .then((data) => {
        this.knowledgeGraph = {
          edges: data.edges.map(elem => ({
            from: elem.source,
            to: elem.target,
            label: elem.relType,
            font: { size: 8 } })),
          nodes: data.nodes.map(elem => ({ id: elem.id, label: elem.label }))
        };
      });
  }

  loadSubGraph() {
    const { inferredTags, selectedTags } = this.state;
    this.setState({
      graph: {
        edges: this.knowledgeGraph.edges
          .filter(elem => inferredTags.find(tag => tag.id === elem.to)),
        nodes: this.knowledgeGraph.nodes
          .filter(elem => inferredTags.find(tag => tag.id === elem.id))
          .map(elem => ({ ...elem, color: selectedTags.find(tag => tag === elem.id) ? '#c32d7b' : '#F4F6F7' }))<commit_msg>minor fix graph name<commit_after>import React from 'react';
import PropTypes from 'prop-types';
import { Autobind } from 'es-decorators';
import { toastr } from 'react-redux-toastr';
import Graph from 'react-graph-vis';

// Components
import Spinner from 'components/ui/Spinner';
import Field from 'components/form/Field';
import Select from 'components/form/SelectInput';

// Services
import GraphService from 'services/GraphService';

const graphOptions = {
  height: '100%',
  layout: {
    hierarchical: false
  },
  edges: {
    color: '#000000'
  }
};

class TagsForm extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      tags: [],
      selectedTags: [],
      inferredTags: [],
      graph: null,
      loading: true,
      loadingInferredTags: false
    };

    this.graphService = new GraphService({ apiURL: process.env.WRI_API_URL });
  }

  /**
   * COMPONENT LIFECYCLE
   * - componentDidMount
  */
  componentDidMount() {
    this.loadAllTags();
    this.loadKnowledgeGraph();
    this.loadDatasetTags();
  }

  loadDatasetTags() {
    this.graphService.getDatasetTags(this.props.dataset)
      .then((response) => {
        const knowledgeGraphVoc = response.find(elem => elem.id === 'knowledge_graph');
        const datasetTags = knowledgeGraphVoc ? knowledgeGraphVoc.attributes.tags : [];
        this.setState({
          selectedTags: datasetTags
        }, () => this.loadInferredTags());
      })
      .catch((err) => {
        toastr.error('Error loading the dataset tags');
        console.error(err);
      });
  }

  loadKnowledgeGraph() {
    // Topics selector
    fetch(new Request('/static/data/knowledgeGraph.json', { credentials: 'same-origin' }))
      .then(response => response.json())
      .then((data) => {
        this.knowledgeGraph = {
          edges: data.edges.map(elem => ({
            from: elem.source,
            to: elem.target,
            label: elem.relType,
            font: { size: 8 } })),
          nodes: data.nodes.map(elem => ({ id: elem.id, label: elem.label }))
        };
      });
  }

  loadSubGraph() {
    const { inferredTags, selectedTags } = this.state;
    this.setState({
      graph: {
        edges: this.knowledgeGraph.edges
          .filter(elem => inferredTags.find(tag => tag.id === elem.to)),
        nodes: this.knowledgeGraph.nodes
          .filter(elem => inferredTags.find(tag => tag.id === elem.id))
          .map(elem => ({ ...elem, color: selectedTags.find(tag => tag === elem.id) ? '#c32d7b' : '#F4F6F7' }))
{'fraction_non_alphanumeric': 0.15020697811945594, 'fraction_numerical': 0.006307904592943032, 'mean_word_length': 2.624285714285714, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 31, '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': '1665378', 'n_tokens_mistral': 1578, 'n_tokens_neox': 1548, 'n_words': 311}