<commit_before>var React = require('react');
var IO = require('./io.jsx');
var mouseDownDrag = require('../utilities/mouseDownDrag');
var PositionUtils = require('../utilities/positionUtils.js');
var CardinalDirection = require('../enum/cardinalDirection.js');
var IOLabelPosition = require('../enum/ioLabelPosition');
var CardinalPortPosition = require('../model/cardinalPortPosition');
var CartesianPortPosition = require('../model/cartesianPortPosition');

var nodeWidth = 150;
var nodeHeight = nodeWidth/1.6;
var headerHeight = 35;
var padding = 5;

var ioRadius = 4;
var ioSpacing = 15;

// DATA MODEL scales values 0-100. Undo that.
var DATA_MODEL_MULTIPLIER = 100.0;

// TODO: specific to rectangular nodes. Refactor out.
var DIRECTION_TO_LABEL_POSITION = {};

DIRECTION_TO_LABEL_POSITION[CardinalDirection.NORTH] = IOLabelPosition.BELOW;
DIRECTION_TO_LABEL_POSITION[CardinalDirection.SOUTH] = IOLabelPosition.ABOVE;
DIRECTION_TO_LABEL_POSITION[CardinalDirection.EAST] = IOLabelPosition.LEFT;
DIRECTION_TO_LABEL_POSITION[CardinalDirection.WEST] = IOLabelPosition.RIGHT;


var Node = React.createClass({

  render: function() {
    var model = this.props.model;
    var position = model.get('position');
    return (
      <g
        className='node'
        transform={'translate(' + position.x + ', ' + position.y + ')'} >
          <rect
            height={nodeHeight} width={nodeWidth}
            className='node-box'
            onMouseDown={mouseDownDrag.bind(this, 'node_body', null, null, this._onNodeBodyPseudoDrag)} />
          <text className='label' textAnchor='start' x={padding} y={padding + 10}>
            {model.get('id')}
          </text>
          {// If the node is pinned, show an unpin button.
            model.get('isPinned')?
              <img
                className='unpin'
                title='unpin this vertex'
                onClick={this._unpin()}
                src='/images/pin.png'/>:
              null
          }
            {this._getRenderedIOs(model.get('inputs'))}
            {this._getRenderedIOs(model.get('outputs'))}
      </g>
    );
  },

  _getRenderedIOs: function(ioModels) {
    return ioModels.map(function(ioModel, id) {
      var position = this._getIOPosition(ioModel);
      
      return (
        <IO 
          model={ioModel}
          key={ioModel.get('globalId')}
          x={position.x} y={position.y} label={ioModel.label} labelPosition={position.labelPosition}
          onMoveRequested={this._onIOMoveRequested}
        />
      );

    }.bind(this));
  },

  _onNodeBodyPseudoDrag: function(event) {
      var oldPos = this.props.model.get('position');
      
      var newX = oldPos.x + event.movementX;
      var newY = oldPos.y + event.movementY;
<commit_msg>Changed pin button from an image to a circle.<commit_after>var React = require('react');
var IO = require('./io.jsx');
var mouseDownDrag = require('../utilities/mouseDownDrag');
var PositionUtils = require('../utilities/positionUtils.js');
var CardinalDirection = require('../enum/cardinalDirection.js');
var IOLabelPosition = require('../enum/ioLabelPosition');
var CardinalPortPosition = require('../model/cardinalPortPosition');
var CartesianPortPosition = require('../model/cartesianPortPosition');

var nodeWidth = 150;
var nodeHeight = nodeWidth/1.6;
var headerHeight = 35;
var padding = 5;

var ioRadius = 4;
var ioSpacing = 15;

var pinX = 0;
var pinY = -20;
var pinRadius = 15;

// DATA MODEL scales values 0-100. Undo that.
var DATA_MODEL_MULTIPLIER = 100.0;

// TODO: specific to rectangular nodes. Refactor out.
var DIRECTION_TO_LABEL_POSITION = {};

DIRECTION_TO_LABEL_POSITION[CardinalDirection.NORTH] = IOLabelPosition.BELOW;
DIRECTION_TO_LABEL_POSITION[CardinalDirection.SOUTH] = IOLabelPosition.ABOVE;
DIRECTION_TO_LABEL_POSITION[CardinalDirection.EAST] = IOLabelPosition.LEFT;
DIRECTION_TO_LABEL_POSITION[CardinalDirection.WEST] = IOLabelPosition.RIGHT;


var Node = React.createClass({

  render: function() {
    var model = this.props.model;
    var position = model.get('position');
    return (
      <g
        className='node'
        transform={'translate(' + position.x + ', ' + position.y + ')'} >
          <rect
            height={nodeHeight} width={nodeWidth}
            className='node-box'
            onMouseDown={mouseDownDrag.bind(this, 'node_body', null, null, this._onNodeBodyPseudoDrag)} />
          <text className='label' textAnchor='start' x={padding} y={padding + 10}>
            {model.get('id')}
          </text>
          {// If the node is pinned, show an unpin button.
            model.get('isPinned')?
              <circle
                className='unpin'
                title='unpin this vertex'
                onClick={this._unpin()}
                cx="pinX" cy="pinY" r="pinRadius"/>:
              null
          }
            {this._getRenderedIOs(model.get('inputs'))}
            {this._getRenderedIOs(model.get('outputs'))}
      </g>
    );
  },

  _getRenderedIOs: function(ioModels) {
    return ioModels.map(function(ioModel, id) {
      var position = this._getIOPosition(ioModel);
      
      return (
        <IO 
          model={ioModel}
          key={ioModel.get('globalId')}
          x={position.x} y={position.y} label={ioModel.label} labelPosition={position.labelPosition}
          onMoveRequested={this._onIOMoveRequested}
        />
      );

    }.bind(this));
  },

  _onNodeBodyPseudoDrag: function(event) {
      var oldPos = this.props.model.get('position');
      
      var newX = oldPos.x + event.movementX;
      var newY = oldPos.y + event.movementY;

{'fraction_non_alphanumeric': 0.13522686673812076, 'fraction_numerical': 0.00839585566273669, 'mean_word_length': 2.8908964558721335, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 17, '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': '4411096', 'n_tokens_mistral': 1795, 'n_tokens_neox': 1734, 'n_words': 329}