initRenderContext()

in frontend/src/components/jfr/flame-graph.js [1410:1470]

• 52 lines of code
• 11 McCabe index (conditional complexity)

    initRenderContext() {
      let w = this.width;
      if (w) {
        if (w.endsWith('%')) {
          this.$flameGraph.style.width = w;
        } else {
          this.$flameGraph.style.width = w + 'px';
        }
      }

      let h = this.height;
      if (h) {
        if (h.endsWith('%')) {
          this.$flameGraph.style.height = h;
        } else {
          this.$flameGraph.style.height = h + 'px';
        }
      }

      this.$context.restore();
      this.$context.save();

      let height = (this.$stackTraceMaxDepth + 1) * this.$frameHeight;

      if (this.$stackTraceMaxDepth > 0) {
        height += this.$stackTraceMaxDepth * this.$yGap;
      }
      height += this.$fgVGap + this.$fgVEndGap;

      this.$flameGraphInnerWrapper.style.height = height + 'px';
      this.$flameGraphHeight = height;

      let innerHeight = this.$flameGraphInner.getBoundingClientRect().height;
      this.$flameGraphInner.style.overflowY = null;
      if (innerHeight < height) {
        this.$flameGraphInner.style.overflowY = 'auto';
      } else if (!this.downward) {
        this.$flameGraphInnerWrapper.style.height = innerHeight + 'px';
      }

      if (!this.downward) {
        this.$flameGraphInner.scrollTop = this.$flameGraphInner.scrollHeight;
        this.$downwardBunnton.style.background = 'grey';
        this.$downwardBunnton.style.flexDirection = 'row';
      } else {
        this.$flameGraphInner.scrollTop = 0;
        this.$downwardBunnton.style.background = 'rgb(24, 144, 255)';
        this.$downwardBunnton.style.flexDirection = 'row-reverse';
      }

      const dpr = window.devicePixelRatio || 1;
      const rect = this.$canvas.getBoundingClientRect();
      this.$canvas.width = rect.width * dpr;
      this.$canvas.height = rect.height * dpr;
      this.$context.scale(dpr, dpr);

      if (this.$dataSource) {
        this.$root.color = this.$$rootColorSelector(this.$dataSource, this.$information);
      }
      this.$colorBarDiv.style.display = 'none';
    }