<commit_before>import { Component, ElementRef, OnInit, Input, ViewEncapsulation } from '@angular/core';
import d3 from './d3';

import { WeightedScreenService } from './weighted-screen.service';
import shuffle from './shuffle-array';

@Component({
  selector: 'weighted-screen',
  template: `
    <div id="erd"></div>
  `,
  styles: [
    `
      :host {
        position: relative;
        height: 100%;
      }

      :host #erd {
        min-height: 100vh;
      }
    `
  ],
  encapsulation: ViewEncapsulation.Emulated
})

export class WeightedScreen implements OnInit {
  @Input() nodesNumber: number = 10;
  nodesRoot: Object;
  projectTitle: string = 'weighted screen';
  @Input() shuffle: boolean = true;
  @Input() handicap: number = 10;

  constructor(
    private weightedScreenService: WeightedScreenService,
    private element: ElementRef
  ) {}

  getNodes(): void {
    this.weightedScreenService.getNodesByViews(this.nodesNumber)
    .then(
      nodes => {
        if (this.shuffle) {
          shuffle.shuffle(nodes);
        }

        let rootNodes = {
          "children": nodes
        };

        this.nodesRoot = rootNodes ;

        this.update(this.handicap);
      }
    )
  }

  ngOnInit(): void {
    this.getNodes();
  }

  ngAfterViewInit(): void {
    
  }

  update(handicap: number) {
    let colors = d3.scales.scaleOrdinal()
        .range(
          d3.scales.schemeCategory10.map(
            function(c) { c = d3.color.rgb(c); c.opacity = 0.6; return c; }
          )
    );

    let root = d3.hierarchy.hierarchy(this.nodesRoot);
  
    root.sum(function(d) { return d.views});

    let sizes = this.getParentSizes(handicap);

    let treemap = d3.hierarchy.treemap()
      .size([sizes.width, sizes.height])
      .padding(2);

    treemap(root);

    d3.select("#erd")
          .selectAll(".node")
          .data(root.leaves())
          .enter()
        .append("div")
          .attr("class", "node")
          .attr("title",
            function(d) {
              return d.id;
            })
          .style("left",
            function(d) {
              return d.x0 + "px";
            })
          .style("top",
            function(d) {
              return d.y0 + "px";
            })
          .style("width",
            function(d) {
              return d.x1 - d.x0 + "px";
            })
          .style("height",
            function(d) {
              return d.y1 - d.y0 + "px";
            })
          .style("line-height",
            function(d) {
              return d.y1 - d.y0 + "px";
            })
          .style("text-align", "center")
          .style("background",
            function(d, i) { 
              return colors(i); 
            })
        .append("div")
          .attr("class", "node-label")
          .style("height",
            function(d) {
              return d.y1 - d.y0 + "px";
            })
          .style("width",
            function(d) {
              return d.x1 - d.x0 + "px";
            })
          .style("line-height", "inherit")
        .append('a')
          .attr("href", function(d){return d.data.url;})
          .text(
            function(d) { 
              return d.data.name;
          })

          d3.selectAll('.node').on('mouseover',function(){
            d3.select(this).style('box-shadow','3px 0px 30px #fff');
          });
          d3.selectAll('.node').on('mouseout',function(){
            d3.select(this).style('box-shadow','none');
          });
  }

  getParentSizes(handicap: number) {
    let height = 0;
    let width = 0;

    let hostElement = this.element.nativeElement;

    if (hostElement.parentNode != null) {
      height = hostElement.parentNode.clientHeight;
      width = hostElement.parentNode.clientWidth;
    }

    return {
      height: height - handicap,
      width: width
    };
  }

}
<commit_msg>Add resize event handling to source formatted logic<commit_after>import { Component, ElementRef, Input, NgZone, OnInit, ViewEncapsulation } from '@angular/core';
import { Observable } from "rxjs";
import d3 from './d3';
import shuffle from './shuffle-array';
import { WeightedScreenService } from './weighted-screen.service';

@Component({
    selector: 'weighted-screen',
    template: `
        <div id="erd"></div>
    `,
    styles: [
    `
        :host {
            position: relative;
            height: 100%;
        }

        :host #erd {
            min-height: 100vh;
        }
    `
    ],
    encapsulation: ViewEncapsulation.Emulated
})

export class WeightedScreen implements OnInit {
    @Input() nodesNumber: number = 10;
    nodesRoot: Object;
    projectTitle: string = 'weighted screen';
    @Input() shuffle: boolean = true;
    @Input() handicap: number = 10;
    resizeSubscription: any;

    constructor(
        private element: ElementRef,
        private weightedScreenService: WeightedScreenService,
        private zone: NgZone
    ) {}

    getNodes(): void {
        this.weightedScreenService.getNodesByViews(this.nodesNumber)
        .then(
            nodes => {
                if (this.shuffle) {
                    shuffle.shuffle(nodes);
                }

                let rootNodes = {
                    "children": nodes
                };

                this.nodesRoot = rootNodes ;

                this.update();
            }
        )
    }

    ngOnInit(): void {
            this.getNodes();
    }

    ngAfterViewInit(): void {
            this.bindResizeEvents();
    }

    update() {
        let colors = d3.scales.scaleOrdinal()
        .range(
            d3.scales.schemeCategory10.map(
                function(c) {
                    c = d3.color.rgb(c); c.opacity = 0.6; return c;
                }
            )
        );

        let root = d3.hierarchy.hierarchy(this.nodesRoot);
    
        root.sum(
            function(d) {
                return d.views
            }
        );

        let sizes = this.getParentSizes();

        let treemap = d3.hierarchy.treemap()
        .size(
            [sizes.width, sizes.height]
        )
        .padding(2);

        treemap(root);

        let node = d3.select("#erd").html("");

        node.selectAll(".node")
            .data(root.leaves())
            .enter()
        .append("div")
            .attr("class", "node")
            .attr("title",
                function(d) {
                    return d.id;
                })
            .style("left",
                function(d) {
                    return d.x0 + "px";
                })
            .style("top",
                function(d) {
                    return d.y0 + "px";
                })
            .style("width",
                function(d) {
                    return d.x1 - d.x0 + "px";
                })
            .style("height",
                function(d) {
                    return d.y1 - d.y0 + "px";
                })
            .style("line-height",
                function(d) {
                    return d.y1 - d.y0 + "px";
                })
            .style("text-align", "center")
            .style("background",
                function(d, i) { 
                    return colors(i); 
                })
        .append("div")
            .attr("class", "node-label")
            .style("height",
                function(d) {
                    return d.y1 - d.y0 + "px";
                })
            .style("width",
                function(d) {
                    return d.x1 - d.x0 + "px";
                })
            .style("line-height", "inherit")
        .append('a')
            .attr("href", function(d){return d.data.url;})
            .text(
                function(d) { 
                    return d.data.name;
                }
            )

        d3.selectAll('.node').on('mouseover',function() {
            d3.select(this).style('box-shadow','3px 0px 30px #fff');
        });

        d3.selectAll('.node').on('mouseout',function() {
            d3.select(this).style('box-shadow','none');
        });
    }

    getParentSizes() {
        let height = 0;
        let width = 0;

        let hostElement = this.element.nativeElement;

        if (hostElement.parentNode != null) {
            height = hostElement.parentNode.clientHeight;
            width = hostElement.parentNode.clientWidth;
        }

        return {
            height: height - this.handicap,
            width: width
        };
    }

    protected bindResizeEvents(): void {
        this.bindResizeEvent();
    }

    private bindResizeEvent() {
        this.zone.runOutsideAngular(
            () => {
                let source = Observable.fromEvent(window, 'resize', null, null);
                let subscription = source.debounceTime(100).subscribe(
                    () => {
                        this.zone.run(
                            () => {
                                this.update();
                            }
                        );
                    }
                );

                this.zone.run(
                    () => {
                        this.resizeSubscription = subscription;
                    }
                );
            }
        );
    }
}

{'fraction_non_alphanumeric': 0.13544950538101969, 'fraction_numerical': 0.010109794542885096, 'mean_word_length': 1.3115577889447236, 'pattern_counts': {'":': 2, '<': 7, '<?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': '6014289', 'n_tokens_mistral': 2737, 'n_tokens_neox': 2583, 'n_words': 481}