<template>
  <div class="column">
    <div id="FeatureGraph4"></div>
  </div>
</template>

<script>
import { EventBus } from '../main.js'
import * as greadability from '../greadability.js'
import * as d3Base from 'd3'

// attach all d3 plugins to the d3 library
const d3 = Object.assign(d3Base)

export default {
  name: 'FeatureSpace4',
  data () {
    return {
      dataFS4: [],
      jsonData: [],
    }
  },
  methods: {
      initializeNetwork () {   
        
        var listofNodes = this.dataFS4[0]
        var dataLoc = JSON.parse(this.dataFS4[5])

        var nodes = []
        listofNodes.forEach(element => nodes.push({"name": element}))

        var links = []

        Object.entries(dataLoc).forEach(
            function ([feature, value]) {
              Object.entries(value).forEach( function ([featureInside, value]) {
                if (feature != featureInside) { 
                  if (value >= 0) {
                    links.push({"source": listofNodes.indexOf(feature), "target": listofNodes.indexOf(featureInside), "value": Math.abs(value) * 30, "group": 1})
                  } else {
                    links.push({"source": listofNodes.indexOf(feature), "target": listofNodes.indexOf(featureInside), "value": Math.abs(value) * 30, "group": 2})
                  }
                }   
              })
        })

        this.jsonData = {"nodes": nodes, "links": links};

        this.graphVizualization()

      },
      graphVizualization () {

        var listofNodes = this.dataFS4[0]
        var uniqueTarget = JSON.parse(this.dataFS4[17])
        var corrTarget = JSON.parse(this.dataFS4[9])
        var corrGlob = JSON.parse(this.dataFS4[13])
        var VIFVar = JSON.parse(this.dataFS4[21])
        var MIVar = JSON.parse(this.dataFS4[25])

        var colorCateg = d3.scaleOrdinal(d3.schemeAccent)

        var corrTargetFormatted = []
        for (let i = 0; i < Object.keys(corrTarget).length; i++) {
          var corrTargetFormattedLoc = []
          for (let j = 0; j < Object.keys(corrTarget[i]).length; j++) {
            if (j > uniqueTarget.length - 1) {
              corrTargetFormattedLoc.push(Math.round(Object.values(corrTarget[i])[j] * 100))
            }
          }
          corrTargetFormatted.push(corrTargetFormattedLoc) 
        }

        var corrGlobFormatted = []
        for (let i = 0; i < Object.keys(corrGlob).length; i++) {
          if (i != 0) {
            corrGlobFormatted.push(Math.round(Object.values(corrGlob)[i]['0'] * 100))
          }
        }

        var VIFVarFormatted = []
        for (let i = 0; i < Object.keys(VIFVar).length; i++) {
          if (i != 0) {
            if (Object.values(VIFVar)[i] > 10) {
              VIFVarFormatted.push(4)
            } else if (Object.values(VIFVar)[i] > 5) {
              VIFVarFormatted.push(2)
            } else {
              VIFVarFormatted.push(0)
            }
          }
        }

        function min(input) {
            if (toString.call(input) !== "[object Array]")  
              return false;
          return Math.min.apply(null, input);
        }

        function max(input) {
            if (toString.call(input) !== "[object Array]")  
              return false;
          return Math.max.apply(null, input);
        }

        function normalize(min, max) {
            var delta = max - min;
            return function (val) {
                return (val - min) / delta;
            };
        }

        var MIMin = min(MIVar)
        var MIMax = max(MIVar)

        MIVar = MIVar.map(normalize(MIMin, MIMax))

        var colorsScaleNodes = d3.scaleLinear()
          .domain([MIMin, MIMax])
          .range(['#a6bddb','#74a9cf','#3690c0','#0570b0','#045a8d','#023858']);

        var svg = d3.select("#FeatureGraph4");
        svg.selectAll("*").remove();

        var width = 800;
        var height = 500;

        var numTicks = 200;

        var selectedParams;
        var bestParams;

        var dispatch = d3.dispatch('layoutend');

        svg = d3.select("#FeatureGraph4").append("svg")
          .attr("width", width)
          .attr("height", height);

        var graph = this.jsonData

        var link = svg.append('g')
          .attr('class', 'links')
          .selectAll('line')
          .data(graph.links)
          .enter().append('line')
          .attr("stroke-width", function(d) { return Math.sqrt(d.value); });

        var node = svg.append('g')
          .attr('class', 'nodes')
          .selectAll('g')
          .data(graph.nodes)
          .enter().append('g')

        var paramGroups = [
          {name: 'chargeStrength', values: [-30, -80]},
          {name: 'linkDistance', values: [30, -80]},
          {name: 'linkStrength', values: [0, 1]},
          {name: 'gravity', values: [0, 0.5]},
          {name: 'iterations', values: [1, 2]},
          {name: 'alphaDecay', values: [0, 0.0228, 0.05]},
          {name: 'velocityDecay', values: [0.4, 0.8]}
        ];

        var paramList = generateParams(paramGroups);

        var bestSoFar = d3.select('.best').selectAll('li')
          .data(paramGroups.map(function (d) { return d.name; }))
          .enter().append('li')
          .text(function (d) { return d; });

        dispatch.on('layoutend', function (params, i) {
          if (!bestParams || params.graphReadability > bestParams.graphReadability) {
            bestParams = params;
            selectedParams = bestParams;

            bestSoFar
              .data(d3.map(bestParams).keys().filter(function (d) { return d !== 'positions' && d !== 'graphReadability'; }))
              .text(function (d) { return d + ' = ' + bestParams[d]; });
          }

        });

        var i = 0;
        var stepper = d3.timer(function () {
          var p = paramList[i];
          var forceSim = getForceSimFromParams(p);

          // Reset node attributes.
          graph.nodes.forEach(function (n) {
            n.x = n.y = n.vx = n.vy = 0;
          });

          forceSim.nodes(graph.nodes)
            .stop();

          forceSim.force('link')
            .links(graph.links);

          for (var t = 0; t < numTicks; ++t) {
            forceSim.tick();
          }

          p.graphReadability = greadability.greadability(graph.nodes, graph.links);
          p.graphReadability = (p.graphReadability.crossing + p.graphReadability.crossingAngle +
          p.graphReadability.angularResolutionMin + p.graphReadability.angularResolutionDev) / 4

          p.positions = graph.nodes.map(function (n) { return {x: n.x, y: n.y}; });

          dispatch.call('layoutend', forceSim, p, i);

          ++i;
          if (i >= paramList.length) {
            
            var widthLoc = 100;
            var arcSize = (6 * widthLoc / 100);
            var innerRadius = arcSize * 2; 

            var svgLoc = node.append('svg').attr('width', widthLoc).attr('height', widthLoc)
              .attr("id", function(d, i) { return "svg" + (listofNodes.length*3+i); })

            graph.nodes.forEach(function(itemVal, indexNode) {

              // var data = [[
              //     {value: 70, label: "", color: '#ff0000', lcolor: ''},
              //     {value: 33, label: "", color: '#00ff00', lcolor: ''},
              //     {value: 100, label: "44.5", color: '#000000', lcolor: 'black'}
              // ];]
              
              var data = []

              for(let k = 0; k < uniqueTarget.length; k++) {
                data.push({value: corrTargetFormatted[k][indexNode], label: '', color: colorCateg(uniqueTarget[k]), lcolor: ''})
              }
              var length = data.length
              data.push({value: 100, label: corrGlobFormatted[indexNode], color: '#000000', lcolor: colorsScaleNodes(MIVar[indexNode])})
              var border = VIFVarFormatted[indexNode]


                  var arcs = data.map(function (obj, i) {
                    if (i == length) {
                      return d3.arc().innerRadius(i * arcSize + innerRadius).outerRadius((i + 1) * arcSize - (widthLoc / 100) + innerRadius + border);
                    } else {
                      return d3.arc().innerRadius(i * arcSize + innerRadius).outerRadius((i + 1) * arcSize - (widthLoc / 100) + innerRadius);
                    }
                  });
                  
                  var arcsGrey = data.map(function (obj, i) {
                      return d3.arc().innerRadius(i * arcSize + (innerRadius + ((arcSize / 2) - 2))).outerRadius((i + 1) * arcSize - ((arcSize / 2)) + (innerRadius));
                  });

                  var pieData = data.map(function (obj, i) {
                      return [
                          {value: obj.value, arc: arcs[i], object: obj},
                          {value: (100 - obj.value), arc: arcsGrey[i], object: obj},
                          {value: 0, arc: arcs[i], object: obj}];
                  });

                  var pie = d3.pie().sort(null).value(function (d) {
                      return d.value;
                  });
                  var id = listofNodes.length*3+indexNode
                  var g = d3.select('#svg'+id).selectAll('g').data(pieData).enter()
                      .append('g')
                      .attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)');
                  var gText = d3.select('#svg'+id).selectAll('g.textClass').data([{}]).enter()
                      .append('g')
                      .classed('textClass', true)
                      .attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)');


                  g.selectAll('path').data(function (d) {
                      return pie(d);
                  }).enter().append('path')
                      .attr('id', function (d, i) {
                          if (i == 1) {
                              return "Text" + d.data.object.label
                          }
                      })
                      .attr('d', function (d) {
                          return d.data.arc(d);
                      }).attr('fill', function (d, i) {
                      return i == 0 ? d.data.object.color : i == 1 ? '#D3D3D3' : 'none';
                  });

                  g.each(function (d, index) {

                      var el = d3.select(this);
                      var path = el.selectAll('path').each(function (r, i) {
                          if (i === 1) {
                              var centroid = r.data.arc.centroid({
                                  startAngle: r.startAngle + 0.05,
                                  endAngle: r.startAngle + 0.001 + 0.05
                              });
                              var lableObj = r.data.object;
                              g.append('text')
                                  .attr('font-size', ((2 * width) / 100))
                                  .attr('dominant-baseline', 'central')
                                  .append("textPath")
                                  .attr("textLength", function (d, i) {
                                      return 0;
                                  })
                                  .attr("startOffset", '5')
                                  .attr("dy", '-3em')
                                  .text(lableObj.value + '%');
                          }
                          if (i === 0) {
                              var centroidText = r.data.arc.centroid({
                                  startAngle: r.startAngle,
                                  endAngle: r.startAngle
                              });
                              var lableObj = r.data.object;
                              gText.append('text')
                                  .attr('font-size', ((2 * width) / 100))
                                  .text(lableObj.label)
                                  .style('fill', lableObj.lcolor)
                                  .attr('transform', "translate(" + (10) + "," + (0 + ") rotate(" + (180) + ")"))
                                  .attr('dominant-baseline', 'central');
                          }
                      });

                  });

                })

                var drag_handler = d3.drag()
                  .on("start", drag_start)
                  .on("drag", drag_drag)
                  .on("end", drag_end);	
                  
                drag_handler(node);

                var labels = node.append("text")
                  .text(function(d) {
                    return d.name;
                  })
                  .attr('x', 20)
                  .attr('y', 8);
            
                node.append('title').text(function (d) { return d.name; });

                //add zoom capabilities 
                var zoom_handler = d3.zoom()
                    .on("zoom", zoom_actions);

                zoom_handler(svg); 

                drawGraph();

                //Zoom functions 
                function zoom_actions(){
                    svg.attr("transform", d3.event.transform)
                }

                function drag_start(d) {
                  if (!d3.event.active) forceSim.alphaTarget(0.3).restart();
                      d.fx = d.x;
                      d.fy = d.y;
                  }

                  //make sure you can't drag the circle outside the box
                  function drag_drag(d) {
                    d.fx = d3.event.x;
                    d.fy = d3.event.y;
                    tickActions();
                  }

                  function drag_end(d) {
                    if (!d3.event.active) forceSim.alphaTarget(0);
                    d.fx = null;
                    d.fy = null;
                  }

                stepper.stop();
          }

        });

        function tickActions() {
          link
            .attr('x1', function (d) { return d.source.x; })
            .attr('x2', function (d) { return d.target.x; })
            .attr('y1', function (d) { return d.source.y; })
            .attr('y2', function (d) { return d.target.y; });

          node
            .attr("id", function(d, i) { return "g" + (listofNodes.length*3+i); })
            .attr("transform", function(d, i) {
              d.x = d.x - 50
              d.y = d.y - 50
              return "translate(" + d.x + "," + d.y + ")";
            })
        };

        function drawGraph () {
          graph.nodes.forEach(function (n, i) {
            n.x = selectedParams.positions[i].x;
            n.y = selectedParams.positions[i].y;
          });

          var xDistance = d3.extent(graph.nodes, function (n) { return n.x; });
          var xMin = xDistance[0];
          xDistance = xDistance[1] - xDistance[0];

          var yDistance = d3.extent(graph.nodes, function (n) { return n.y; });
          var yMin = yDistance[0];
          yDistance = yDistance[1] - yDistance[0];

          graph.nodes.forEach(function (n, i) {
            n.x = (height - 10) * (n.x - xMin) / Math.max(xDistance, yDistance);
            n.y = (height - 10) * (n.y - yMin) / Math.max(xDistance, yDistance);
          });

          xDistance = d3.extent(graph.nodes, function (n) { return n.x; });
          var xMid = (xDistance[1] + xDistance[0]) / 2;
          yDistance = d3.extent(graph.nodes, function (n) { return n.y; });
          var yMid = (yDistance[1] - yDistance[0]) / 2;

          graph.nodes.forEach(function (n, i) {
            n.x = n.x + width/2 - xMid;
            n.y = n.y + height/2 - yMid;
          });

          tickActions();
        }

        function generateParams (paramGroups, paramList, currParam) {
          var p = paramGroups[0];

          if (!paramList) paramList = [];

          if (!currParam) currParam = {};

          p.values.forEach(function (v) {
            var setting = {};
            setting[p.name] = v;
            if (paramGroups.length === 1) {
              paramList.push(Object.assign(setting, currParam));
            } else {
              generateParams(paramGroups.slice(1), paramList, Object.assign(setting, currParam));
            }
          });

          return paramList;
        }

        function getForceSimFromParams (params) {
          var forceSim = d3.forceSimulation()
            .force('link', d3.forceLink().iterations(params.iterations))
            .force('charge', d3.forceManyBody().strength(params.chargeStrength))
            .force('x', d3.forceX(0).strength(params.gravity))
            .force('y', d3.forceY(0).strength(params.gravity))
            .force('center', d3.forceCenter(0, 0))
            .alphaDecay(params.alphaDecay)
            .velocityDecay(params.velocityDecay);

          if (params.linkStrength !== null) {
            forceSim.force('link').strength(params.linkStrength);
          }

          return forceSim;
        }

      },
      reset () {
        var svg = d3.select("#FeatureGraph4");
        svg.selectAll("*").remove();
      },
    },
  mounted () {
    EventBus.$on('quad4', data => { this.dataFS4 = data })
    EventBus.$on('quad4', this.initializeNetwork)
  }
}
</script>

<style>

text {
  font-family: sans-serif;
}

svg {
  display: block;
}

.column {
  float: left;
  margin: 0 10px;
}

</style>