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);
}