react-json-editor-ajrm icon indicating copy to clipboard operation
react-json-editor-ajrm copied to clipboard

After a certain data threshold, create collapsible nodes to partially display data

Open AndrewRedican opened this issue 6 years ago • 5 comments

This component creates an element for each color-coded word. In some particular cases, if too much data is provided to this component, say, a very large object, the browser will begin to struggle rendering the elements.

There are two steps to solve this problem:

  1. Determine a reasonable threshold in which browsers will be able to handle rending of nodes/elements.
  2. Create a fallback mechanism feature, activated when data handle exceedes the established threshold. This fallback mechanism should be collapsing nested keys, in such a way a user can open and close to view more information of that javascript object.

AndrewRedican avatar May 15 '18 00:05 AndrewRedican

Hi @AndrewRedican thanks for replying to my issue. Can you please guide me how can I set particular threshold so that browser renders the larger object with ease.

waleedasad avatar Jul 05 '18 16:07 waleedasad

Hey @waleedasad, at the moment this feature is not available. Expect an update for this in a week's period of time.

AndrewRedican avatar Jul 12 '18 14:07 AndrewRedican

Outlining general steps for this tasks:

  1. Test how many nodes can be created in DOM before it becomes an issue. (Noticiable lagg).
  2. Create a function to measure the amount of data within each key.
  3. Decide on a default threshold and provide new property for user to provide a particular threshold.
  4. Rewrite component, in a way, the end user, is able to expand on big nodes if necessary, but will not render these nodes until user actually needs to use them. Will need to rethink the numbered row labels, possibly hidden
    structures with particular ids to change display still, and/or insert remove child elements from it.

AndrewRedican avatar Jul 15 '18 06:07 AndrewRedican

Working on it this week. https://github.com/AndrewRedican/react-json-editor-ajrm/tree/collapsible-nodes

AndrewRedican avatar Aug 07 '18 20:08 AndrewRedican

I am currently facing this issue when a large object is attempted to be rendered (i.e) the component crashes with an error in the console. What can I do to mitigate this?

fabianTMC avatar Sep 30 '19 14:09 fabianTMC

I no longer intend to update this project. I am working instead on a complete rewrite.

I'd like to thank you for using and taking interest in this project.

I also would like to apologize for not following up sooner. However, do realize for the most part this has been a one-man show, and the occasional contributions I used to receive. What I am saying is, I am in dire need of volunteers.

If this is something you would be interested in participating in, you can join in the discussion.

There is a known limitation to the amount of data that can be analyzed and rendered in the browser. You will have to limit the amount of data given to the component. This will be addressed in the rewrite.

AndrewRedican avatar Jan 29 '23 03:01 AndrewRedican