<commit_before>import React from 'react';

import connectToStores from 'alt/utils/connectToStores';
import { SourceCodeStore } from '../stores/Store.js';
import { SourceCodeActions } from '../actions/Actions.js';
import { IndependentPanel } from './independentpanel.jsx';

//import CodeMirrorEditor from 'react-code-mirror';
import CodeMirror from 'codemirror';
require('codemirror/addon/selection/active-line');
require('codemirror/addon/selection/mark-selection');
require('codemirror/addon/search/searchcursor');
require('codemirror/mode/clike/clike');

class CodeMirrorEditor extends React.Component {
  constructor(props) {
    super(props);
    this.marked = [undefined, undefined];
  }
  
  componentDidMount() {
    this.editor = CodeMirror.fromTextArea(React.findDOMNode(this), {
      mode: "text/x-csrc",
      styleActiveLine: false,
      styleSelectedText: true,
      lineNumbers: true,
      readOnly: true,
      lineWrapping: true,
      viewportMargin: Infinity
    });
  }

  componentWillReceiveProps(nextProps) {
    // TODO do this nicer
    // Dont store marked in the Store since nested Actions are evil
    this.marked[0] && this.marked[0].clear();
    this.marked[1] && this.marked[1].clear();

    if(nextProps.file === undefined )
      return;

    $.get(`${this.props.prefix}/${nextProps.file}`, (data) => {
      this.editor.setValue(data);
    
      if(nextProps.file === undefined )
        return;

      if( nextProps.line === undefined )
        return;

      if( nextProps.line instanceof Array ) {
        this.marked[0] && this.marked[0].clear();
        let marked0 = this.editor.markText( 
          {line: nextProps.line[0]-1, ch:0},
          {line: nextProps.line[0],ch:0},
          {css: "background-color: #ff7"}
        );
        this.marked[0] = marked0;
        
        this.marked[1] && this.marked[1].clear();
        let marked1 = this.editor.markText( 
          {line: nextProps.line[1]-1, ch:0},
          {line: nextProps.line[1],ch:0},
          {css: "background-color: #ff7"}
        );
        this.marked[1] = marked1;
      }
      else {
        let marked0 = this.editor.markText( 
          {line: nextProps.line-1, ch:0},
          {line: nextProps.line,ch:0},
          {css: "background-color: #ff7"}
        );
        this.marked[0] = marked0;
      }

    });
  }

  componentWillUnmount() {
    if (this.editor) {
      this.editor.toTextArea();
    }
  }

  render() {
    return (
      <textarea id="code" ref="code" readOnly/>
    )
  }
}

@connectToStores
class SourceCode extends React.Component {
  constructor(props) {
    super(props);
    SourceCodeActions.loadSource(`${this.props.prefix}/this.props.file`);
  }
  
  static getStores() {
    return [SourceCodeStore];
  }

  static getPropsFromStores() {
    return SourceCodeStore.getState();
  }
  
  render() {
    return (
      <IndependentPanel {...this.props} header="Source Code" expanded={this.props.expanded}>
        <CodeMirrorEditor prefix={this.props.prefix} file={this.props.file} line={this.props.line} />
      </IndependentPanel>
    )
  }
}

export { SourceCode }<commit_msg>SourceCode: Show that nothing is selected on a page load<commit_after>import React from 'react';

import connectToStores from 'alt/utils/connectToStores';
import { SourceCodeStore } from '../stores/Store.js';
import { SourceCodeActions } from '../actions/Actions.js';
import { IndependentPanel } from './independentpanel.jsx';

//import CodeMirrorEditor from 'react-code-mirror';
import CodeMirror from 'codemirror';
require('codemirror/addon/selection/active-line');
require('codemirror/addon/selection/mark-selection');
require('codemirror/addon/search/searchcursor');
require('codemirror/mode/clike/clike');

class CodeMirrorEditor extends React.Component {
  constructor(props) {
    super(props);
    this.marked = [undefined, undefined];
  }
  
  componentDidMount() {
    this.editor = CodeMirror.fromTextArea(React.findDOMNode(this), {
      mode: "text/x-csrc",
      styleActiveLine: false,
      styleSelectedText: true,
      lineNumbers: true,
      readOnly: true,
      lineWrapping: true,
      viewportMargin: Infinity
    });
    this.editor.setValue("Nothing selected yet");
  }

  componentWillReceiveProps(nextProps) {
    // TODO do this nicer
    // Dont store marked in the Store since nested Actions are evil
    this.marked[0] && this.marked[0].clear();
    this.marked[1] && this.marked[1].clear();

    if(nextProps.file === undefined)
      return;

    $.get(`${this.props.prefix}/${nextProps.file}`, (data) => {
      this.editor.setValue(data);
    
      if(nextProps.file === undefined )
        return;

      if( nextProps.line === undefined )
        return;

      if( nextProps.line instanceof Array ) {
        this.marked[0] && this.marked[0].clear();
        let marked0 = this.editor.markText( 
          {line: nextProps.line[0]-1, ch:0},
          {line: nextProps.line[0],ch:0},
          {css: "background-color: #ff7"}
        );
        this.marked[0] = marked0;
        
        this.marked[1] && this.marked[1].clear();
        let marked1 = this.editor.markText( 
          {line: nextProps.line[1]-1, ch:0},
          {line: nextProps.line[1],ch:0},
          {css: "background-color: #ff7"}
        );
        this.marked[1] = marked1;
      }
      else {
        let marked0 = this.editor.markText( 
          {line: nextProps.line-1, ch:0},
          {line: nextProps.line,ch:0},
          {css: "background-color: #ff7"}
        );
        this.marked[0] = marked0;
      }

    });
  }

  componentWillUnmount() {
    if (this.editor) {
      this.editor.toTextArea();
    }
  }

  render() {
    return (
      <textarea id="code" ref="code" readOnly/>
    )
  }
}

@connectToStores
class SourceCode extends React.Component {
  constructor(props) {
    super(props);
  }
  
  static getStores() {
    return [SourceCodeStore];
  }

  static getPropsFromStores() {
    return SourceCodeStore.getState();
  }
  
  render() {
    return (
      <IndependentPanel {...this.props} header="Source Code" expanded={this.props.expanded}>
        <CodeMirrorEditor prefix={this.props.prefix} file={this.props.file} line={this.props.line} />
      </IndependentPanel>
    )
  }
}

export { SourceCode }
{'fraction_non_alphanumeric': 0.14831317632081475, 'fraction_numerical': 0.010502864417568428, 'mean_word_length': 2.734402852049911, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 13, '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': '7563201', 'n_tokens_mistral': 2074, 'n_tokens_neox': 1995, 'n_words': 369}