<commit_before>/**
 * @module modules/json-source-sk
 * @description <h2><code>json-source-sk</code></h2>
 *
 * Displays buttons that, when pressed, retrieve and show the JSON file that
 * was ingested for the point in the trace identified by commit id and trace
 * id.
 *
 */
import { html, render } from 'lit-html'
import { $$ } from 'common-sk/modules/dom'
import { errorMessage } from 'elements-sk/errorMessage'
import { jsonOrThrow } from 'common-sk/modules/jsonOrThrow'
import 'elements-sk/spinner-sk'

const template = (ele) => html`
  <button @click=${ele._loadSource}>View Source File</button>
  <button @click=${ele._loadSourceSmall}>View Source File Without Results</button>
  <spinner-sk id=spinner></spinner-sk>
  <pre id=display>${ele._json}</pre>
`;

window.customElements.define('json-source-sk', class extends HTMLElement {
  constructor() {
    super();
    this._json = '';
  }

  connectedCallback() {
    this._render();
    this._spinner = $$('#spinner', this);
  }

  /** @prop cid {string} A serialized cid.CommitID. */
  get cid() { return this._cid }
  set cid(val) {
    this._cid = val;
    this._json = '';
    this._render();
  }

  /** @prop traceid {string} The ID of the trace. */
  get traceid() { return this._traceid }
  set traceid(val) {
    this._traceid = val;
    this._json = '';
    this._render();
  }

  _loadSource() {
    this._loadSourceImpl(false);
  }

  _loadSourceSmall() {
    this._loadSourceImpl(true);
  }

  _loadSourceImpl(isSmall) {
    if (!this.traceid) {
      return
    }
    if (this.cid === undefined || this.cid.offset === undefined) {
      return
    }
    const body = {
      cid: this.cid,
      traceid: this.traceid,
    };
    this._spinner.active = true;
    let url = "/_/details/";
    if (isSmall) {
      url += "?results=false";
    }
    fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(body),
    }).then(jsonOrThrow).then((json) => {
      this._spinner.active = false;
      this._json = JSON.stringify(json, null, '  ');
      this._render();
    }).catch((e) => {
      this._spinner.active = false;
      errorMessage(e);
    });
  }

  _render() {
    render(template(this), this, {eventContext: this});
  }

});
<commit_msg>Perf - Follow-up changes to json-source-sk review.<commit_after>/**
 * @module modules/json-source-sk
 * @description <h2><code>json-source-sk</code></h2>
 *
 * Displays buttons that, when pressed, retrieve and show the JSON file that
 * was ingested for the point in the trace identified by commit id and trace
 * id.
 *
 */
import { html, render } from 'lit-html'
import { $$ } from 'common-sk/modules/dom'
import { errorMessage } from 'elements-sk/errorMessage'
import { jsonOrThrow } from 'common-sk/modules/jsonOrThrow'
import 'elements-sk/spinner-sk'

const template = (ele) => html`
  <button @click=${ele._loadSource}>View Source File</button>
  <button @click=${ele._loadSourceSmall}>View Source File Without Results</button>
  <spinner-sk id=spinner></spinner-sk>
  <pre>${ele._json}</pre>
`;

window.customElements.define('json-source-sk', class extends HTMLElement {
  constructor() {
    super();
    this._json = '';
  }

  connectedCallback() {
    this._render();
    this._spinner = $$('#spinner', this);
  }

  /** @prop cid {string} A serialized cid.CommitID. */
  get cid() { return this._cid; }
  set cid(val) {
    this._cid = val;
    this._json = '';
    this._render();
  }

  /** @prop traceid {string} The ID of the trace. */
  get traceid() { return this._traceid; }
  set traceid(val) {
    this._traceid = val;
    this._json = '';
    this._render();
  }

  _loadSource() {
    this._loadSourceImpl(false);
  }

  _loadSourceSmall() {
    this._loadSourceImpl(true);
  }

  _loadSourceImpl(isSmall) {
    if (this._spinner.active === true) {
      return;
    }
    if (!this.traceid) {
      return;
    }
    if (!this.cid || this.cid.offset === undefined) {
      return;
    }
    const body = {
      cid: this.cid,
      traceid: this.traceid,
    };
    this._spinner.active = true;
    let url = '/_/details/';
    if (isSmall) {
      url += '?results=false';
    }
    fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(body),
    }).then(jsonOrThrow).then((json) => {
      this._spinner.active = false;
      this._json = JSON.stringify(json, null, '  ');
      this._render();
    }).catch((e) => {
      this._spinner.active = false;
      errorMessage(e);
    });
  }

  _render() {
    render(template(this), this, {eventContext: this});
  }

});

{'fraction_non_alphanumeric': 0.1660958904109589, 'fraction_numerical': 0.0008561643835616438, 'mean_word_length': 2.81781045751634, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 33, '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': '5207910', 'n_tokens_mistral': 1572, 'n_tokens_neox': 1567, 'n_words': 341}