<commit_before>import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
import Graph from 'graph'
import Xdsm from 'xdsm'

class XdsmViewer extends React.Component {
  constructor(props) {
    super(props) 
    this.state = this.props.mda
  }
  
  componentDidMount() {    
    // D3 drawing
    var tooltip = d3.select("body").selectAll(".tooltip").data(['tooltip'])
    .enter().append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);

    console.log(JSON.stringify(this.state));
    var graph = new Graph(this.state);
    var xdsm = new Xdsm(graph, 'root', tooltip);
    xdsm.draw();
  }
  
  shouldComponentUpdate() {
    return false; // This prevents future re-renders of this component
  }
  
  render() {
    return (
      <div className="xdsm"></div>
     );
  }
}

class Discipline extends React.Component {
  constructor(props) {
    super(props)
    this.state = {name: this.props.name}
  }
  
  render() {
    return <h2>{this.state.name}</h2>
  }  
} 

class Mda extends React.Component {
  constructor(props) {
    super(props) 
    this.state = this.props.mda
  }
   
  render() {
    var disciplines = this.state.nodes.map((node) => {
      return (
          <Discipline key={node.id} name={node.name} />
        );
    }); 
    
    return (
      <div>
        <h1>MDA {this.state.name}</h1>
        <XdsmViewer mda={this.state}/>
        {disciplines}
      </div>
    );
  }
}

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <Mda mda={MDA}/>,
    document.getElementById('mda-viewer'),
  )
})
<commit_msg>show connections<commit_after>import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
import Graph from 'graph'
import Xdsm from 'xdsm'

class XdsmViewer extends React.Component {
  constructor(props) {
    super(props) 
    this.state = this.props.mda
  }
  
  componentDidMount() {    
    // D3 drawing
    var tooltip = d3.select("body").selectAll(".tooltip").data(['tooltip'])
    .enter().append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);

    console.log(JSON.stringify(this.state));
    var graph = new Graph(this.state);
    var xdsm = new Xdsm(graph, 'root', tooltip);
    xdsm.draw();
  }
  
  shouldComponentUpdate() {
    return false; // This prevents future re-renders of this component
  }
  
  render() {
    return ( <div className="xdsm"></div> );
  }
}

class Discipline extends React.Component {
  constructor(props) {
    super(props)
    this.state = {name: this.props.name}
  }
  
  render() {
    return <h2>{this.state.name}</h2>
  }  
} 

class Connection extends React.Component {
  constructor(props) {
    super(props)
    this.state = this.props.conn
  }
  
  render() {
    return (
      <tr>
        <td>{this.state.from}</td> 
        <td>{this.state.varname}</td> 
        <td>{this.state.to}</td>
      </tr>
    );
  }    
}

class Connections extends React.Component {
  constructor(props) {
    super(props)
    this.state = this.props.mda;
  }
  
  render() {
    var conns = [] 
    this.state.edges.forEach((edge) => {
      var vars = edge.name.split(",");
      vars.forEach((v) => {
        var nameFrom = this._findNode(edge.from).name
        var nameTo = this._findNode(edge.to).name
        conns.push({
          id: nameFrom+'_'+v+nameTo,  
          from: nameFrom,
          to: nameTo,
          varname: v 
        });
      }, this);
    }, this); 
    
    var connections = conns.map((conn) => {
      return ( <Connection key={conn.id} conn={conn}/> );
    }); 
    
    return (
      <table className="table table-striped connections">
        <thead>
          <tr>
            <th>From</th>
            <th>Variable</th>
            <th>To</th>
          </tr>
        </thead>
      
        <tbody>
          {connections}
        </tbody>
      </table>
    );
  }    
    
  _findNode(id) {
    if (id === '_U_') return {id:'_U_', name:'_U_'}
    for (var i=0; i < this.state.nodes.length; i++) {
      if (this.state.nodes[i].id === id) {
        return this.state.nodes[i];
      } 
    };
    throw "Node id ("+ id +") unknown: " + JSON.stringify(this.state.nodes);
  }
}

class Mda extends React.Component {
  constructor(props) {
    super(props) 
    this.state = this.props.mda;
  }
  
  render() {    
    return (
      <div>
        <h1>MDA {this.state.name}</h1>
        <XdsmViewer mda={this.state}/>
        <Connections mda={this.state}/>
      </div>
    );
  }
}

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <Mda mda={MDA}/>,
    document.getElementById('mda-viewer'),
  )
})

{'fraction_non_alphanumeric': 0.16176786097403992, 'fraction_numerical': 0.0032181935207037118, 'mean_word_length': 2.2807881773399017, 'pattern_counts': {'":': 0, '<': 49, '<?xml version=': 0, '>': 54, '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': '5610405', 'n_tokens_mistral': 1615, 'n_tokens_neox': 1598, 'n_words': 302}