Dynamic JSON Tree Rendering in Web Browsers
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Analyzing and searching massive quantities of machine-generated data poses challenges due to its vast size and varied formats, leading to inefficiencies in data processing and retrieval, especially in modern data centers and IT environments.
Innovation Solution
Implementing an event-based data intake and query system with a late-binding schema, such as the SPLUNK ENTERPRISE system, which allows for flexible data processing and storage of minimally processed machine data for later retrieval and analysis, enabling efficient rendering of hierarchically organized data through client-side code that dynamically generates HTML elements for only the visible portion of a visual tree representation.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Adaptability or versatility
If all machine data is stored for later analysis, then data analysis flexibility is improved, but storage requirements increase
Solution Approach 1:
The patent extracts only the visible portion of the data tree that fits within the display area, rendering and storing HTML elements solely for that visible subset. This extraction principle allows the system to maintain full data analysis flexibility while minimizing storage requirements by not retaining HTML representations of invisible data portions.
Solution Approach 2:
The patent segments the large JSON data structure into manageable portions based on the visible display area. By dividing the data tree into visible and invisible segments, the system processes and stores only the relevant visible segment as HTML elements, reducing overall storage requirements while preserving access to the complete data set for analysis.
2Loss of information
If a visual tree representation of all JSON data is rendered, then complete data visibility is improved, but web browser performance deteriorates
Solution Approach 1:
The patent applies partial action by rendering HTML elements for only the visible portion of the data tree rather than the entire structure. The client-side executable logic determines which JSON objects correspond to visible tree nodes and generates HTML elements exclusively for those portions, leaving the rest unrendered. This partial rendering approach maintains complete data visibility for analysis while significantly improving browser performance by reducing the rendering workload.
Solution Approach 2:
The patent segments the visual tree representation into visible and invisible portions, processing and rendering only the visible segment. This segmentation allows the system to maintain complete data accessibility while improving browser performance by limiting HTML generation and rendering to manageable portions of the data structure.
3Loss of information
If HTML elements are generated for all JSON objects, then complete data representation is improved, but memory usage increases
Solution Approach 1:
The patent extracts HTML element generation to only those JSON objects that correspond to visible tree nodes in the display area. The client-side executable logic identifies which JSON objects need HTML representation based on visibility criteria, generating HTML elements solely for that extracted subset. This approach maintains complete data representation capability while reducing memory usage by not creating HTML elements for invisible data portions.
4Loss of time
If pre-specified data items are extracted and stored, then data retrieval efficiency is improved, but data analysis flexibility deteriorates
Solution Approach 1:
The patent implements a dynamic approach where the system stores minimally processed machine data in its original format rather than pre-extracting specific data items. This dynamic storage approach allows the system to adapt to different analysis needs by processing and rendering different portions of the data as required, maintaining full data analysis flexibility while providing efficient retrieval through the visual tree interface.
Data Source
AI summary
Techniques are described for optimizing the display of hierarchically organized data by dynamically rendering portions visible within a display area of a web browser. Using a web page file corresponding to a web page that includes the display of a visual tree structure representing JavaScript Object Notation (JSON) data and client-side executable logic, an application running at the client device displays the web page including the visual tree structure and one or more first tree nodes corresponding to first JSON objects from a first portion of the JSON data. In response to input requesting display of one or more second JSON objects from a second portion of the JSON data not currently displayed in the visual tree structure, the application modifies one or more elements of the web page to update display of the visual tree structure to include one or more second tree nodes corresponding to the second JSON objects.