<commit_before>elation.elements.define('janus.ui.navigation', class extends elation.elements.ui.panel {
  init() {
    super.init();
  }
  create() {
    this.innerHTML = elation.template.get('janus.ui.navigation');
    this.client = this.getClient();
    this.janusweb = this.client.janusweb;

    this.urlbar = this.getElementsByTagName('janus-ui-urlbar')[0];
    this.statusindicator = this.getElementsByTagName('janus-ui-statusindicator')[0];
    this.notifications = this.getElementsByTagName('janus-ui-notifications')[0];

    elation.events.add(this.janusweb, 'room_change', (ev) => this.updateCurrentURL());
  }
  getClient() {
    var node = this;
    while (node) {
      if (node.dataset['elationComponent'] == 'janusweb.client') {
        return elation.component.fetch(node);
      }
      node = node.parentNode
    }
  }
  updateCurrentURL() {
    var room = this.janusweb.currentroom;
    this.statusindicator.updateCurrentURL(room.getProxyObject());
  }
});
elation.elements.define('janus.ui.statusindicator', class extends elation.elements.ui.indicator {
  init() {
    super.init();
  }
  create() {
    this.inner = elation.elements.create('div', {
      class: 'inner',
      append: this
    });
    this.client = this.getClient();
    this.janusweb = this.client.janusweb;
    this.updateCurrentURL();

    this.tooltip = elation.elements.create('ui-tooltip', {
      //append: this,
    });
    setTimeout(() => { this.tooltip.hide(); }, 1000);

    this.canvas = document.createElement('canvas');
    this.inner.appendChild(this.canvas);

    elation.events.add(this.janusweb, 'room_load_start', (ev) => this.updateCurrentURL());

    this.updateCurrentURL();

    this.percent = 0;

    this.refresh();


    elation.events.add(this, 'mouseover', (ev) => this.handleMouseOver(ev));
    elation.events.add([this, this.tooltip], 'mouseout', (ev) => this.handleMouseOut(ev));
  }
  render() {
    var canvas = this.canvas;
    var ctx = canvas.getContext('2d');
    canvas.width = this.inner.offsetWidth;
    canvas.height = this.inner.offsetHeight;

    ctx.beginPath();
    ctx.moveTo(canvas.width / 2, canvas.height / 2);
    ctx.arc(canvas.width / 2, canvas.height / 2, canvas.width / 2, -Math.PI/2, (2 * Math.PI * this.percent - Math.PI/2));
    ctx.closePath();
    ctx.fillStyle = (this.currentstatus == 'complete' ? 'green' : 'darkgreen');
    ctx.fill();
  }
  getClient() {
    var node = this;
    while (node) {
      if (node.dataset['elationComponent'] == 'janusweb.client') {
        return elation.component.fetch(node);
      }
      node = node.parentNode
    }
  }
  updateCurrentURL(room) {<commit_msg>Fixed canvas creation race condition<commit_after>elation.elements.define('janus.ui.navigation', class extends elation.elements.ui.panel {
  init() {
    super.init();
  }
  create() {
    this.innerHTML = elation.template.get('janus.ui.navigation');
    this.client = this.getClient();
    this.janusweb = this.client.janusweb;

    this.urlbar = this.getElementsByTagName('janus-ui-urlbar')[0];
    this.statusindicator = this.getElementsByTagName('janus-ui-statusindicator')[0];
    this.notifications = this.getElementsByTagName('janus-ui-notifications')[0];

    elation.events.add(this.janusweb, 'room_change', (ev) => this.updateCurrentURL());
  }
  getClient() {
    var node = this;
    while (node) {
      if (node.dataset['elationComponent'] == 'janusweb.client') {
        return elation.component.fetch(node);
      }
      node = node.parentNode
    }
  }
  updateCurrentURL() {
    var room = this.janusweb.currentroom;
    this.statusindicator.updateCurrentURL(room.getProxyObject());
  }
});
elation.elements.define('janus.ui.statusindicator', class extends elation.elements.ui.indicator {
  init() {
    super.init();
  }
  create() {
    this.inner = elation.elements.create('div', {
      class: 'inner',
      append: this
    });
    this.client = this.getClient();
    this.janusweb = this.client.janusweb;
    this.updateCurrentURL();

    this.tooltip = elation.elements.create('ui-tooltip', {
      //append: this,
    });
    setTimeout(() => { this.tooltip.hide(); }, 1000);


    elation.events.add(this.janusweb, 'room_load_start', (ev) => this.updateCurrentURL());

    this.updateCurrentURL();

    this.percent = 0;

    this.refresh();


    elation.events.add(this, 'mouseover', (ev) => this.handleMouseOver(ev));
    elation.events.add([this, this.tooltip], 'mouseout', (ev) => this.handleMouseOut(ev));
  }
  render() {
    var canvas = this.getCanvas();
    var ctx = canvas.getContext('2d');
    canvas.width = this.inner.offsetWidth;
    canvas.height = this.inner.offsetHeight;

    ctx.beginPath();
    ctx.moveTo(canvas.width / 2, canvas.height / 2);
    ctx.arc(canvas.width / 2, canvas.height / 2, canvas.width / 2, -Math.PI/2, (2 * Math.PI * this.percent - Math.PI/2));
    ctx.closePath();
    ctx.fillStyle = (this.currentstatus == 'complete' ? 'green' : 'darkgreen');
    ctx.fill();
  }
  getCanvas() {
    if (!this.canvas) {
      this.canvas = document.createElement('canvas');
      this.inner.appendChild(this.canvas);
    }
    return this.canvas;
  }

  getClient() {
    var node = this;
    while (node) {
      if (node.dataset['elationComponent'] == 'janusweb.client') {
        return elation.component.fetch(node);
      }
      node = node.parentNode
    }
  }
  updateCurrentURL(room) {
{'fraction_non_alphanumeric': 0.1652770057439318, 'fraction_numerical': 0.006299796183064666, 'mean_word_length': 3.227094753328113, 'pattern_counts': {'":': 0, '<': 3, '<?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': '818600', 'n_tokens_mistral': 1809, 'n_tokens_neox': 1773, 'n_words': 277}