From 174fd47a567498af736f012c26ae799c973dfd29 Mon Sep 17 00:00:00 2001 From: rahulramesha Date: Thu, 8 Jul 2021 23:02:26 +0530 Subject: [PATCH 1/3] Optimized Array grouping --- src/js/components/ArrayGroup.js | 2 +- src/js/components/DataTypes/Object.js | 4 +- src/js/components/JsonViewer.js | 4 +- .../OptimizedArrayGroup/ArraySubGroup.js | 98 +++++++++++++++++++ .../OptimizedArrayGroup/CollapsedArray.js | 33 +++++++ .../components/OptimizedArrayGroup/index.js | 90 +++++++++++++++++ .../components/OptimizedArrayGroup/utils.js | 13 +++ 7 files changed, 241 insertions(+), 3 deletions(-) create mode 100644 src/js/components/OptimizedArrayGroup/ArraySubGroup.js create mode 100644 src/js/components/OptimizedArrayGroup/CollapsedArray.js create mode 100644 src/js/components/OptimizedArrayGroup/index.js create mode 100644 src/js/components/OptimizedArrayGroup/utils.js diff --git a/src/js/components/ArrayGroup.js b/src/js/components/ArrayGroup.js index deae3f8e..676106d4 100644 --- a/src/js/components/ArrayGroup.js +++ b/src/js/components/ArrayGroup.js @@ -15,7 +15,7 @@ export default class extends React.PureComponent { constructor(props) { super(props); this.state = { - expanded: [] + expanded: [true] }; } diff --git a/src/js/components/DataTypes/Object.js b/src/js/components/DataTypes/Object.js index 4c7cb93f..06cc3c17 100644 --- a/src/js/components/DataTypes/Object.js +++ b/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( diff --git a/src/js/components/JsonViewer.js b/src/js/components/JsonViewer.js index 5c0278f8..d49570e9 100644 --- a/src/js/components/JsonViewer.js +++ b/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 ( diff --git a/src/js/components/OptimizedArrayGroup/ArraySubGroup.js b/src/js/components/OptimizedArrayGroup/ArraySubGroup.js new file mode 100644 index 00000000..3e3faadf --- /dev/null +++ b/src/js/components/OptimizedArrayGroup/ArraySubGroup.js @@ -0,0 +1,98 @@ +import React, { useState } from 'react'; + +import { CollapsedArray } from './CollapsedArray'; +import { getArrayGroupState } from './utils'; +import ObjectComponent from '../DataTypes/Object'; +import Theme from '../../themes/getStyle'; + +export const ArraySubGroup = props => { + + const { + theme, + expanded: parentExpanded, + getExpandedIcon, + toggleCollapsed: toggleParentCollapsed, + src, + height, + namespace, + name, + start, + expandFirstGroup, + rest, + } = props + + const size = Math.pow(10, height) + const groups = Math.ceil(src.length/size) + + const [expanded, setExpanded] = useState([...getArrayGroupState(start, expandFirstGroup, groups)]) + + const toggleCollapsed = i => { + setExpanded(prevExpanded => { + const newExpanded = [...prevExpanded] + newExpanded[i] = !newExpanded[i] + + return newExpanded; + }) + } + + return +
+ +
+ {getExpandedIcon(parentExpanded)} +
+ { parentExpanded ? ( + height < 1 ? ( + + ) : expanded.map((isExpanded, i) => { + const groupStart = i * size + + return toggleCollapsed(i)} + rest={rest} + theme={theme} + getExpandedIcon={getExpandedIcon} + namespace={namespace} + expandFirstGroup={expandFirstGroup} + /> + }) + ) : ( + + )} + +
+ + +} \ No newline at end of file diff --git a/src/js/components/OptimizedArrayGroup/CollapsedArray.js b/src/js/components/OptimizedArrayGroup/CollapsedArray.js new file mode 100644 index 00000000..08d8d924 --- /dev/null +++ b/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 + [ +
+ + {start} + {' - '} + {end} + +
+ ] + +} \ No newline at end of file diff --git a/src/js/components/OptimizedArrayGroup/index.js b/src/js/components/OptimizedArrayGroup/index.js new file mode 100644 index 00000000..1cdb63f6 --- /dev/null +++ b/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 ; + } + + return ; + } + + 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 ( +
+ + + + + +
+ ); + } +} diff --git a/src/js/components/OptimizedArrayGroup/utils.js b/src/js/components/OptimizedArrayGroup/utils.js new file mode 100644 index 00000000..8552d633 --- /dev/null +++ b/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 +} \ No newline at end of file From 1cee5361c8b4ecb4c98096ae14725b50604c0658 Mon Sep 17 00:00:00 2001 From: rahulramesha Date: Fri, 9 Jul 2021 16:02:47 +0530 Subject: [PATCH 2/3] controlled render for Optimized array groups --- src/js/components/ArrayGroup.js | 2 +- .../OptimizedArrayGroup/ArraySubGroup.js | 193 ++++++++++-------- 2 files changed, 109 insertions(+), 86 deletions(-) diff --git a/src/js/components/ArrayGroup.js b/src/js/components/ArrayGroup.js index 676106d4..deae3f8e 100644 --- a/src/js/components/ArrayGroup.js +++ b/src/js/components/ArrayGroup.js @@ -15,7 +15,7 @@ export default class extends React.PureComponent { constructor(props) { super(props); this.state = { - expanded: [true] + expanded: [] }; } diff --git a/src/js/components/OptimizedArrayGroup/ArraySubGroup.js b/src/js/components/OptimizedArrayGroup/ArraySubGroup.js index 3e3faadf..7e3063ad 100644 --- a/src/js/components/OptimizedArrayGroup/ArraySubGroup.js +++ b/src/js/components/OptimizedArrayGroup/ArraySubGroup.js @@ -1,98 +1,121 @@ -import React, { useState } from 'react'; +import React from 'react'; import { CollapsedArray } from './CollapsedArray'; import { getArrayGroupState } from './utils'; import ObjectComponent from '../DataTypes/Object'; import Theme from '../../themes/getStyle'; -export const ArraySubGroup = props => { +export class ArraySubGroup extends React.Component { - const { - theme, - expanded: parentExpanded, - getExpandedIcon, - toggleCollapsed: toggleParentCollapsed, - src, - height, - namespace, - name, - start, - expandFirstGroup, - rest, - } = props + constructor(props) { + super(props); + const { height, src, start, expandFirstGroup } = props; - const size = Math.pow(10, height) - const groups = Math.ceil(src.length/size) + this.size = Math.pow(10, height); + const groups = Math.ceil(src.length/this.size); - const [expanded, setExpanded] = useState([...getArrayGroupState(start, expandFirstGroup, groups)]) - - const toggleCollapsed = i => { - setExpanded(prevExpanded => { - const newExpanded = [...prevExpanded] - newExpanded[i] = !newExpanded[i] - - return newExpanded; - }) + this.state = { + expanded: [...getArrayGroupState( + start, + expandFirstGroup, + groups, + )] + }; } - return -
- -
- {getExpandedIcon(parentExpanded)} -
- { parentExpanded ? ( - height < 1 ? ( - - ) : expanded.map((isExpanded, i) => { - const groupStart = i * size - - return toggleCollapsed(i)} - rest={rest} - theme={theme} - getExpandedIcon={getExpandedIcon} - namespace={namespace} - expandFirstGroup={expandFirstGroup} - /> - }) - ) : ( - - )} - -
+ shouldComponentUpdate(nextProps, nextState) { + if(this.props.expanded !== nextProps.expanded) + return true; - + return !!nextProps.expanded; + } + + 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 +
+ +
+ {getExpandedIcon(parentExpanded)} +
+ { parentExpanded ? ( + height < 1 ? ( + + ) : this.state.expanded.map((isExpanded, i) => { + const groupStart = i * this.size + + return toggleCollapsed(i)} + rest={rest} + theme={theme} + getExpandedIcon={getExpandedIcon} + namespace={namespace} + expandFirstGroup={expandFirstGroup} + /> + }) + ) : ( + + )} + +
+ + + } } \ No newline at end of file From 9ff2d5492d6224ffe2915bbeb9bc202e7cb8eda5 Mon Sep 17 00:00:00 2001 From: Rahul R Date: Tue, 13 Jul 2021 12:56:53 +0530 Subject: [PATCH 3/3] shouldComponentUpdate Logic change --- src/js/components/OptimizedArrayGroup/ArraySubGroup.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/js/components/OptimizedArrayGroup/ArraySubGroup.js b/src/js/components/OptimizedArrayGroup/ArraySubGroup.js index 7e3063ad..76947e61 100644 --- a/src/js/components/OptimizedArrayGroup/ArraySubGroup.js +++ b/src/js/components/OptimizedArrayGroup/ArraySubGroup.js @@ -24,10 +24,16 @@ export class ArraySubGroup extends React.Component { } shouldComponentUpdate(nextProps, nextState) { - if(this.props.expanded !== nextProps.expanded) + if(nextProps.expanded || this.props.expanded) + return true; + + if( + nextProps.start !== this.props.start || + nextProps.src?.length !== this.props.src?.length + ) return true; - return !!nextProps.expanded; + return false; } render() {