Streamlined Array Grouping for large JSON Arrays

src/js/components/DataTypes/Object.js

@@ -8,6 +8,7 @@ import { JsonObject } from './DataTypes';
 import VariableEditor from './../VariableEditor';
 import VariableMeta from './../VariableMeta';
 import ArrayGroup from './../ArrayGroup';
+import OptimizedArrayGroup from './../OptimizedArrayGroup';
 import ObjectName from './../ObjectName';
 
 //attribute store
@@ -280,7 +281,8 @@ class RjvObject extends React.PureComponent {
                     groupArraysAfterLength &&
                     variable.value.length > groupArraysAfterLength
                 ) {
-                    ObjectComponent = ArrayGroup;
+                    if(props.useOptimizedArray) ObjectComponent = OptimizedArrayGroup;
+                    else ObjectComponent = ArrayGroup;
                 }
 
                 elements.push(

src/js/components/JsonViewer.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import JsonObject from './DataTypes/Object';
 import ArrayGroup from './ArrayGroup';
+import OptimizedArrayGroup from './OptimizedArrayGroup';
 
 export default class extends React.PureComponent {
     render = () => {
@@ -13,7 +14,8 @@ export default class extends React.PureComponent {
             props.groupArraysAfterLength &&
             props.src.length > props.groupArraysAfterLength
         ) {
-            ObjectComponent = ArrayGroup;
+            if(props.useOptimizedArray) ObjectComponent = OptimizedArrayGroup;
+            else ObjectComponent = ArrayGroup;
         }
 
         return (

src/js/components/OptimizedArrayGroup/ArraySubGroup.js

@@ -0,0 +1,127 @@
+import React from 'react';
+
+import { CollapsedArray } from './CollapsedArray';
+import { getArrayGroupState } from './utils';
+import ObjectComponent from '../DataTypes/Object';
+import Theme from '../../themes/getStyle';
+
+export class ArraySubGroup extends React.Component {
+
+    constructor(props) {
+        super(props);
+        const { height, src, start, expandFirstGroup } = props;
+
+        this.size = Math.pow(10, height);
+        const groups = Math.ceil(src.length/this.size);
+
+        this.state = {
+            expanded: [...getArrayGroupState(
+                start,
+                expandFirstGroup,
+                groups,
+                )]
+        };
+    }
+
+    shouldComponentUpdate(nextProps, nextState) {
+        if(nextProps.expanded || this.props.expanded)
+            return true;
+
+        if(
+            nextProps.start !== this.props.start ||
+            nextProps.src?.length !== this.props.src?.length
+        )
+            return true;
+
+        return false;
+    }
+
+    render() {
+        const {
+            theme,
+            expanded: parentExpanded,
+            getExpandedIcon,
+            toggleCollapsed: toggleParentCollapsed,
+            src,
+            height,
+            namespace,
+            name,
+            start,
+            expandFirstGroup,
+            rest,
+        } = this.props
+
+        const toggleCollapsed = i => {
+            this.setState(prevState => {
+                const newExpanded = [...prevState.expanded]
+                newExpanded[i] = !newExpanded[i]
+
+                return {
+                    expanded: newExpanded
+                };
+            })
+        }
+
+        return <React.Fragment>
+            <div
+                class="object-key-val array-group"
+                {...Theme(theme, 'objectKeyVal', {
+                    marginLeft: 6,
+                    paddingLeft: 5
+                })}
+            >
+                <span {...Theme(theme, 'brace-row')}>
+                    <div
+                        class="icon-container"
+                        {...Theme(theme, 'icon-container')}
+                        onClick={toggleParentCollapsed}
+                    >
+                        {getExpandedIcon(parentExpanded)}
+                    </div>
+                    { parentExpanded ? (
+                        height < 1 ? (
+                            <ObjectComponent
+                                depth={0}
+                                name={false}
+                                collapsed={false}
+                                groupArraysAfterLength={10}
+                                index_offset={start}
+                                src={src}
+                                namespace={namespace}
+                                type="array"
+                                parent_type="array_group"
+                                theme={theme}
+                                {...rest}
+                            />
+                        ) : this.state.expanded.map((isExpanded, i) => {
+                            const groupStart = i * this.size
+
+                            return <ArraySubGroup
+                                key={name+'_'+height+'_'+i}
+                                name={name}
+                                height={height - 1}
+                                src={src.slice(groupStart, groupStart + this.size)}
+                                start={start + groupStart}
+                                expanded={isExpanded}
+                                toggleCollapsed={() => toggleCollapsed(i)}
+                                rest={rest}
+                                theme={theme}
+                                getExpandedIcon={getExpandedIcon}
+                                namespace={namespace}
+                                expandFirstGroup={expandFirstGroup}
+                            />
+                        })
+                        ) : (
+                            <CollapsedArray 
+                                theme={theme}
+                                start={start}
+                                end={start + src.length - 1}
+                                onClick={toggleParentCollapsed}
+                            />
+                        )}
+                </span>
+            </div>
+
+        </React.Fragment>
+    }
+}

src/js/components/OptimizedArrayGroup/CollapsedArray.js

@@ -0,0 +1,33 @@
+import React from "react";
+
+import Theme from '../../themes/getStyle';
+
+export const CollapsedArray = props => {
+
+    const { theme, start, end, onClick } = props;
+
+    return <span
+        {...Theme(theme, 'brace')}
+        onClick={onClick}
+        class="array-group-brace"
+    >
+        [
+        <div
+            {...Theme(
+                theme,
+                'array-group-meta-data'
+            )}
+            class="array-group-meta-data"
+        >
+            <span
+                class="object-size"
+                {...Theme(theme, 'object-size')}
+            >
+                {start}
+                {' - '}
+                {end}
+            </span>
+        </div>
+        ]
+    </span>
+}

src/js/components/OptimizedArrayGroup/index.js

@@ -0,0 +1,90 @@
+import React from 'react';
+
+import { ArraySubGroup } from './ArraySubGroup'
+import VariableMeta from '../VariableMeta';
+import ObjectName from '../ObjectName';
+import Theme from '../../themes/getStyle';
+
+
+//icons
+import { CollapsedIcon, ExpandedIcon } from '../ToggleIcons';
+
+//single indent is 5px
+const SINGLE_INDENT = 5;
+
+export default class extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        this.state = {
+            expanded: !!this.props.expandFirstGroup
+        };
+    }
+
+    toggleCollapsed = () => {
+        this.setState((prevValue) => {
+            return {
+                expanded: !prevValue.expanded
+            }
+        });
+    }
+
+    getExpandedIcon = (expanded) => {
+        const { theme, iconStyle } = this.props;
+
+        if (expanded) {
+            return <ExpandedIcon {...{ theme, iconStyle }} />;
+        }
+
+        return <CollapsedIcon {...{ theme, iconStyle }} />;
+    }
+
+    render() {
+        const {
+            src,
+            groupArraysAfterLength,
+            depth,
+            name,
+            theme,
+            jsvRoot,
+            namespace,
+            parent_type,
+            expandFirstGroup,
+            ...rest
+        } = this.props;
+
+        let object_padding_left = 0;
+
+        if (!jsvRoot) {
+            object_padding_left = this.props.indentWidth * SINGLE_INDENT;
+        }
+
+        const groupingLevels = Math.floor(Math.log10(src.length));
+
+        return (
+            <div
+                class="object-key-val"
+                {...Theme(theme, jsvRoot ? 'jsv-root' : 'objectKeyVal', {
+                    paddingLeft: object_padding_left
+                })}
+            >
+                <ObjectName {...this.props} />
+                <span>
+                    <VariableMeta size={src.length} {...this.props} />
+                </span>
+                <ArraySubGroup 
+                    theme={theme}
+                    getExpandedIcon={this.getExpandedIcon}
+                    src={src}
+                    height={groupingLevels}
+                    expanded={this.state.expanded}
+                    rest={rest}
+                    namespace={namespace}
+                    name={name}
+                    start={0}
+                    toggleCollapsed={this.toggleCollapsed}
+                    expandFirstGroup={expandFirstGroup}
+                />
+            </div>
+        );
+    }
+}

src/js/components/OptimizedArrayGroup/utils.js

@@ -0,0 +1,13 @@
+export function getArrayGroupState(start, expandFirstGroup, groups) {
+    const expandedArray = []
+    for(let i=0; i < groups; i++) {
+        if(!i && !start && expandFirstGroup) {
+            expandedArray.push(true)
+            continue
+        }
+
+        expandedArray.push(false)
+    }
+
+    return expandedArray
+}