_renderJsonDiffResult()

in web/src/components/panels/result-panel.js [235:307]


  _renderJsonDiffResult() {
    if (!this.result.value) {
      this._renderResultText('Empty result');
      return;
    }

    let left = JSON.parse(this.payload);
    let right = JSON.parse(this.result.value);
    if (this.view === 'json') {
      let extensions = [basicSetup, EditorView.editable.of(false), json()];

      if (this._wrapLinesInput()?.checked) {
        extensions.push(EditorView.lineWrapping);
      }

      let editor = new EditorView({
        extensions: extensions,
        parent: this._resultPanel(),
      });

      editor.dispatch({
        changes: {
          from: 0,
          to: editor.state.doc.length,
          insert: JSON.stringify(right, null, 2),
        },
      });
      return;
    }

    // Comparable JSON results
    const delta = jsondiffpatch
      .create({
        objectHash: function (obj, index) {
          // Spans
          if (obj?.spanId && obj?.traceId) {
            return `${obj.spanId}-${obj?.traceId}`;
          }
          // Metrics
          if (
            obj?.name &&
            (obj?.gauge ||
              obj?.sum ||
              obj?.histogram ||
              obj?.exponentialHistogram ||
              obj?.summary)
          ) {
            return obj?.name;
          }
          // Attributes
          if (obj?.key && obj?.value) {
            return obj.key;
          }
          return '$$index:' + index;
        },
      })
      .diff(left, right);
    if (!delta) {
      this._renderResultText('No changes');
      return;
    }

    let formatter =
      this.view === 'annotated_delta' ? annotatedFormatter : htmlFormatter;

    if (formatter.showUnchanged && formatter.hideUnchanged) {
      formatter.showUnchanged(
        this._showUnchangedInput().checked,
        this._resultPanel()
      );
    }
    this._resultPanel().innerHTML = formatter.format(delta, left);
  }