Viewport-Based Hierarchical Data Rendering in Web Browsers
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Rendering large hierarchical data structures, such as organizational charts with thousands of nodes, is inefficient in web browsers due to limited performance and lack of support for animations and advanced graphics features, leading to performance issues and slow rendering.
Innovation Solution
A method and system for rendering hierarchical data structures that retrieves node data from a human resources management software, determines viewport parameters, calculates node coordinates, and efficiently renders each node within the viewport using HTML5, while utilizing componentization, flexibility, and specialization strategies to optimize performance across different browsers and platforms.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Adaptability or versatility
If traditional web browser rendering is used for large hierarchical data structures, then browser compatibility and flexibility are maintained, but rendering performance deteriorates and processing time increases
Solution Approach 1:
The patent segments the large hierarchical data structure into smaller manageable portions using viewport-based rendering. Only nodes visible within the current viewport are rendered and updated, while nodes outside the viewport are excluded from rendering. This segmentation approach maintains browser compatibility while dramatically improving rendering performance for large organizational charts with thousands of nodes.
2Ease of manufacture
If traditional web browser rendering is used for large hierarchical data structures, then ease of implementation is maintained, but animation capability and rendering efficiency deteriorate
Solution Approach 1:
The patent implements dynamic rendering that adapts to user interaction and viewport changes. The rendering system dynamically determines which nodes to render based on the current viewport, and dynamically updates only the necessary portions during animations and user interactions. This dynamic approach enables smooth animations and fast rendering while maintaining ease of implementation through standardized browser APIs.
3Loss of information
If all nodes in the hierarchical structure are rendered, then complete data visualization is achieved, but processing requirements and rendering time increase significantly
Solution Approach 1:
The patent applies local quality by rendering different portions of the hierarchical structure with different levels of detail based on their visibility. Nodes within the viewport are rendered with full detail, while nodes outside the viewport are excluded from rendering entirely. This approach maintains complete data visualization capability (all nodes can be accessed and will render when visible) while dramatically reducing processing requirements by only actively rendering visible nodes.
Data Source
AI summary
The rendering of hierarchical data having large number of nodes, such as organizational charts, can present challenges based upon the browser technology utilized. Rendering of thousands of nodes can be memory intensive and provide poor performance when rendered in a browser. A method of rendering hierarchical data in a browser is provided. Node data from a datastore associated with human resources management software is retrieved. Each item of node data is associated with an employee of the associated organization. A viewport for the hierarchical data structure is determined based upon the computing device used for viewing the hierarchical data structure. Coordinates for nodes in the hierarchical structure based upon their relative position in the hierarchy and a configuration of the view port can then be determined and rendered.