# Visualization of the JSON documents has become ugly

**URL:** <https://discuss.elastic.co/t/visualization-of-the-json-documents-has-become-ugly/306686>\
**Category:** Kibana\
**Created:** [June 8, 2022, 11:07am UTC](https://discuss.elastic.co/t/visualization-of-the-json-documents-has-become-ugly/306686 "2022-06-08T11:07:32Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![web-develop](https://avatars.discourse-cdn.com/v4/letter/w/e47c2d/32.png) [@web-develop](https://discuss.elastic.co/u/web-develop)\
**Post date:** [June 8, 2022, 11:07am UTC](https://discuss.elastic.co/t/visualization-of-the-json-documents-has-become-ugly/306686/1 "2022-06-08T11:07:32Z")

</div>

Kibana has become ugly in vewing JSON documents since some version, I'm not sure exactly which one, let's consider these two: v7.7.0 (normal) and v7.15.1 (abnormal).

The problem is developers has replaced browsers' native selection of the text with emulated selection, therefore many functions of context menu doesn't work anymore. Even copying selected text got impossible. Moreover, the performance of rendering has dramatically decreased, browsers are literally hanging during rendering visualization of JSON.

So, I call on developers. Please, return back the output of JSON inside 'pre' tag, do not wrap it into complex HTML structures, do not prevent browsers' native behavior on working with text.

---

<div class="post-metadata">

**Author:** ![ghudgins](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ghudgins/32/138532_2.png) [@ghudgins](https://discuss.elastic.co/u/ghudgins)\
**Post date:** [June 16, 2022, 6:00pm UTC](https://discuss.elastic.co/t/visualization-of-the-json-documents-has-become-ugly/306686/2 "2022-06-16T18:00:25Z")

</div>

Can you show me where you experience this in a screenshot?

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/b/0/b0efa321febd5b96a0d2aeef7918a4c9b0afbeb0.jpeg)

---

<div class="post-metadata">

**Author:** ![ghudgins](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ghudgins/32/138532_2.png) [@ghudgins](https://discuss.elastic.co/u/ghudgins)\
**Post date:** [June 16, 2022, 6:22pm UTC](https://discuss.elastic.co/t/visualization-of-the-json-documents-has-become-ugly/306686/3 "2022-06-16T18:22:10Z")

</div>

a colleague pointed out to me that this menu is missing "copy" 🤦‍♂️

will look for an issue and file one if there isn't one for this!

Edit: issue - [[Discover] Can't right click --\> Copy JSON in document flyout · Issue #134597 · elastic/kibana · GitHub](https://github.com/elastic/kibana/issues/134597)

---

<div class="post-metadata">

**Author:** ![matw](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/matw/32/13913_2.png) [@matw](https://discuss.elastic.co/u/matw)\
**Post date:** [June 17, 2022, 7:01am UTC](https://discuss.elastic.co/t/visualization-of-the-json-documents-has-become-ugly/306686/4 "2022-06-17T07:01:49Z")

</div>

Hi  
One note about performance, you are right about that, but we improved a lot in 7.17.3:

> <https://github.com/elastic/kibana/pull/127439>
>
> \## Summary
> 
> This PR limits the height of the CodeEditor used by the JSON tab o…f Discover's doc viewer. Without this change the whole JSON doc was rendered completely, which led to performance issues when displaying large JSON documents. With this change the height of the displayed JSON is limited and scrollable. This means that the JSON content is rendered virtualized, only the visible part. This leads to much better performance in case there's a very large document to display.
> 
> \### Before (Using document explorer)
> CodeEditor is rendered completely, container ist scrolling
> 
> https://user-images.githubusercontent.com/463851/158405890-39ae7b04-17e3-40d8-b1c0-b46eb79cc813.mp4
> 
> 
> 
> \### After (Using document explorer)
> CodeEditor is rendered with a fixed height, adapted to container, so the CodeEditor is scrolling
> 
> 
> https://user-images.githubusercontent.com/463851/158405938-d0020b81-42de-4c55-a929-276097a0a4ff.mp4
> 
> 
> \### After (Using classic table)
> 
> The height is limited when there are more than 500 lines to display, no change until this limit. So it's inline scrolling beyond that limit:
> 
> 
> 
> !\[Bildschirmfoto\_2022-03-15\_um\_16\_22\_16\](https://user-images.githubusercontent.com/463851/158413248-3e6741c6-fe50-4340-8b66-d75bcc74d7fd.png)
> 
> 
> 
> 
> Fixes #124572
> 
> \### Checklist
> 
> \- \[\] \[Unit or functional tests\](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios
> \- \[\] This renders correctly on smaller devices using a responsive layout. (You can test this \[in your browser\](https://www.browserstack.com/guide/responsive-testing-on-local-server))
> \- \[\] This was checked for \[cross-browser compatibility\](https://www.elastic.co/support/matrix#matrix\_browsers)

For small JSON docs it might still be slower, for large documents the new view is much, much faster due to virtualization of the content  
Best,  
Matthias

---

<div class="post-metadata">

**Author:** ![jughosta](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jughosta/32/107160_2.png) [@jughosta](https://discuss.elastic.co/u/jughosta)\
**Post date:** [June 17, 2022, 8:40am UTC](https://discuss.elastic.co/t/visualization-of-the-json-documents-has-become-ugly/306686/5 "2022-06-17T08:40:27Z")

</div>

Please use keyboard shortcuts for copying a selected text while we are looking into the issue with the context menu.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [July 15, 2022, 8:41am UTC](https://discuss.elastic.co/t/visualization-of-the-json-documents-has-become-ugly/306686/6 "2022-07-15T08:41:24Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.
