<commit_before>import styled from 'styled-components';
import { Baseline } from '../../shared/composers';
import { createSimulation, updateSimulation } from './graph-simulation';
import GraphNode from './graph-node';
import GraphLink from './graph-link';
import React from 'react';

const StyledSvg = styled.svg`
  width: 1024px;
  height: 860px;
`;

const svgSize = {
  width: 1024,
  height: 860
};

let dragInfo = {
  dragging: false,
  nodeId: null,
  position: null
};

class TopologyGraph extends React.Component {

  componentWillMount() {
    const services = this.props.services;

    const simulationData = createSimulation(
      services,
      svgSize//,
      //() => this.forceUpdate(),
      //() => this.forceUpdate()
    );

    const simulation = simulationData.simulation;

    const n = Math.ceil(
      Math.log(
        simulation.alphaMin()) / Math.log(
          1 - simulation.alphaDecay()));
    for (var i = 0; i < n; ++i) {
      simulation.tick();
    }

    this.setState(simulationData);
  }

  componentWillReceiveProps(nextProps) {
    // either, we'll have more services
    // or, we'll have less services
    // or, data of services had changed =>
    //  do shallow check on objects and links, if no change, don't do rerender
    //  otherwise, redo them bitches = by what I mean to update the simulation
    //  try freezing exisiting ones... then adding another

    const {
      nodes,
      links
    } = this.state;

    const services = nextProps.services;
    // TODO this here means we'll need to evaluate whether to we have more links!

    // this is tmp for the compare above
    if(services !== nodes.length) {
      const simulation = this.state.simulation;
      const nextSimulationData = updateSimulation(
        simulation,
        services,
        nodes,
        links,
        svgSize,
        () => this.forceUpdate(),
        () => this.forceUpdate()
      );

      const nextSimulation = nextSimulationData.simulation;
      // console.log('nextSimulationData.nodes = ', nextSimulationData.nodes);

      const n = Math.ceil(
        Math.log(
          nextSimulation.alphaMin()) / Math.log(
            1 - nextSimulation.alphaDecay())) - 200;
      for (var i = 0; i < n; ++i) {
        nextSimulation.tick();
      }

      //this.state.simulation.nodes().forEach((node, index) => {
      //  delete node.fx;
      //  delete node.fy;
      //});

      this.setState(nextSimulationData);
    }
  }

  render() {

    const services = this.props.services;

    const {
      nodes,
      links
    } = this.state;

    const simNode = (nodeId) =>
      nodes.reduce((acc, simNode, index) =>
        simNode.id === nodeId ? simNode : acc, {});

    const nodesData = services.map((service, index) => ({
      ...service,
      ...simNode(service.uuid)
    }));

    const nodeData = (nodeId) =>
      nodesData.reduce((acc, nodeData, index) =>
        nodeData.id === nodeId ? nodeData : acc, {});
    // TODO links will need to know whether a service has children
    // if it does, the height of it will be different
    const linksData = links.map((link, index) => ({
      source: nodeData(link.source.id),
      target: nodeData(link.target.id)
    }));

    const onDragStart = (evt, nodeId) => {
      // it's this node's position that we'll need to update
      dragInfo.dragging = true;
      dragInfo.nodeId = nodeId;
      if(evt.changedTouches) {
        dragInfo.position = {
          x: evt.changedTouches[0].pageX,
          y: evt.changedTouches[0].pageY
        };
      }
      else {
        dragInfo.position = {
          x: evt.clientX,
          y: evt.clientY
        };
      }
    };

    const onDragMove = (evt) => {

      if(dragInfo.dragging) {

        let offset = {};
        if(evt.changedTouches) {
          offset = {
            x: evt.changedTouches[0].pageX - dragInfo.position.x,
            y: evt.changedTouches[0].pageY - dragInfo.position.y
          };
        }
        else {
          offset = {
            x: evt.clientX - dragInfo.position.x,
            y: evt.clientY - dragInfo.position.y
          };
        }

        const dragNodes = nodes.map((simNode, index) => {
          if(simNode.id === dragInfo.nodeId) {
            return ({
              ...simNode,
              x: simNode.x + offset.x,
              y: simNode.y + offset.y
            });
          }
          return ({
            ...simNode
          });
        });

        this.setState({
          nodes: dragNodes
        });

        if(evt.changedTouches) {
          dragInfo.position = {
            x: evt.changedTouches[0].pageX,
            y: evt.changedTouches[0].pageY
          };
        }
        else {
          dragInfo.position = {
            x: evt.clientX,
            y: evt.clientY
          };
        }
      }
    };

    const onDragEnd = (evt) => {
      dragInfo = {
        dragging: false,
        nodeId: null,
        position: null
      };
    };

    const renderedNodes = nodesData.map((n, index) => (
      <GraphNode
        key={index}
        data={n}
        index={index}
        onDragStart={onDragStart}
        connected
      />
    ));

    const renderedLinks = linksData.map((l, index) => (
      <GraphLink
        key={index}
        data={l}
        index={index}
      />
    ));

    return (
      <StyledSvg
        onMouseMove={onDragMove}
        onTouchMove={onDragMove}
        onMouseUp={onDragEnd}<commit_msg>Consul to display correctly<commit_after>import styled from 'styled-components';
import { Baseline } from '../../shared/composers';
import { createSimulation, updateSimulation } from './graph-simulation';
import Constants from './constants';
import GraphNode from './graph-node';
import GraphLink from './graph-link';
import React from 'react';

const StyledSvg = styled.svg`
  width: 1024px;
  height: 860px;
`;

const svgSize = {
  width: 1024,
  height: 860
};

let dragInfo = {
  dragging: false,
  nodeId: null,
  position: null
};

class TopologyGraph extends React.Component {

  componentWillMount() {
    const services = this.props.services.reduce((acc, service, index) => {
      if(service.id !== 'consul') acc.push(service);
      return acc;
    }, []);

    const simulationData = createSimulation(
      services,
      svgSize//,
      //() => this.forceUpdate(),
      //() => this.forceUpdate()
    );

    const simulation = simulationData.simulation;

    const n = Math.ceil(
      Math.log(
        simulation.alphaMin()) / Math.log(
          1 - simulation.alphaDecay()));
    for (var i = 0; i < n; ++i) {
      simulation.tick();
    }

    this.setState(simulationData);
  }

  componentWillReceiveProps(nextProps) {
    // either, we'll have more services
    // or, we'll have less services
    // or, data of services had changed =>
    //  do shallow check on objects and links, if no change, don't do rerender
    //  otherwise, redo them bitches = by what I mean to update the simulation
    //  try freezing exisiting ones... then adding another

    const {
      nodes,
      links
    } = this.state;

    const services = nextProps.services.reduce((acc, service, index) => {
      if(service.id !== 'consul') acc.push(service);
      return acc;
    }, []);
    // TODO this here means we'll need to evaluate whether to we have more links!

    // this is tmp for the compare above
    if(services !== nodes.length) {
      const simulation = this.state.simulation;
      const nextSimulationData = updateSimulation(
        simulation,
        services,
        nodes,
        links,
        svgSize,
        () => this.forceUpdate(),
        () => this.forceUpdate()
      );

      const nextSimulation = nextSimulationData.simulation;
      // console.log('nextSimulationData.nodes = ', nextSimulationData.nodes);

      const n = Math.ceil(
        Math.log(
          nextSimulation.alphaMin()) / Math.log(
            1 - nextSimulation.alphaDecay())) - 200;
      for (var i = 0; i < n; ++i) {
        nextSimulation.tick();
      }

      //this.state.simulation.nodes().forEach((node, index) => {
      //  delete node.fx;
      //  delete node.fy;
      //});

      this.setState(nextSimulationData);
    }
  }

  render() {

    const services = this.props.services;

    const {
      nodes,
      links
    } = this.state;

    const simNode = (nodeId) =>
      nodes.reduce((acc, simNode, index) =>
        simNode.id === nodeId ? simNode : acc, {});

    const nodesData = services.map((service, index) => {
      const sNode = service.id === 'consul' ? {
        x: svgSize.width - Constants.nodeSize.width,
        y: 0
      } : simNode(service.uuid);
      return ({
        ...service,
        ...sNode
      });
    });

    const nodeData = (nodeId) =>
      nodesData.reduce((acc, nodeData, index) =>
        nodeData.id === nodeId ? nodeData : acc, {});
    // TODO links will need to know whether a service has children
    // if it does, the height of it will be different
    const linksData = links.map((link, index) => ({
      source: nodeData(link.source.id),
      target: nodeData(link.target.id)
    }));

    const onDragStart = (evt, nodeId) => {
      // it's this node's position that we'll need to update
      dragInfo.dragging = true;
      dragInfo.nodeId = nodeId;
      if(evt.changedTouches) {
        dragInfo.position = {
          x: evt.changedTouches[0].pageX,
          y: evt.changedTouches[0].pageY
        };
      }
      else {
        dragInfo.position = {
          x: evt.clientX,
          y: evt.clientY
        };
      }
    };

    const onDragMove = (evt) => {

      if(dragInfo.dragging) {

        let offset = {};
        if(evt.changedTouches) {
          offset = {
            x: evt.changedTouches[0].pageX - dragInfo.position.x,
            y: evt.changedTouches[0].pageY - dragInfo.position.y
          };
        }
        else {
          offset = {
            x: evt.clientX - dragInfo.position.x,
            y: evt.clientY - dragInfo.position.y
          };
        }

        const dragNodes = nodes.map((simNode, index) => {
          if(simNode.id === dragInfo.nodeId) {
            return ({
              ...simNode,
              x: simNode.x + offset.x,
              y: simNode.y + offset.y
            });
          }
          return ({
            ...simNode
          });
        });

        this.setState({
          nodes: dragNodes
        });

        if(evt.changedTouches) {
          dragInfo.position = {
            x: evt.changedTouches[0].pageX,
            y: evt.changedTouches[0].pageY
          };
        }
        else {
          dragInfo.position = {
            x: evt.clientX,
            y: evt.clientY
          };
        }
      }
    };

    const onDragEnd = (evt) => {
      dragInfo = {
        dragging: false,
        nodeId: null,
        position: null
      };
    };

    const renderedNodes = nodesData.map((n, index) => (
      <GraphNode
        key={index}
        data={n}
        index={index}
        onDragStart={onDragStart}
        connected={n.id !== 'consul'}
      />
    ));

    const renderedLinks = linksData.map((l, index) => (
      <GraphLink
        key={index}
        data={l}
        index={index}
      />
    ));

    return (
      <StyledSvg
        onMouseMove={onDragMove}
        onTouchMove={onDragMove}
        onMouseUp={onDragEnd}
{'fraction_non_alphanumeric': 0.13096072931276298, 'fraction_numerical': 0.004821178120617111, 'mean_word_length': 1.7990677134445534, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 45, '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': '360868', 'n_tokens_mistral': 3517, 'n_tokens_neox': 3444, 'n_words': 792}