Skip to content

Component as props objectOf support. #2207

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 11 commits into from
Apr 26, 2023
Merged

Component as props objectOf support. #2207

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
23d6803
Collect objectOf nodes.
T4rk1n Aug 24, 2022
2eb3ddb
Add object of component as props test cases.
T4rk1n Aug 26, 2022
0b9c040
support objectOf component type.
T4rk1n Aug 26, 2022
d922bbf
Merge branch 'dev' into cap-object-of
T4rk1n Apr 24, 2023
dc685e9
Handle object of components inside of lists.
T4rk1n Apr 25, 2023
a2cf8b0
Update changelog
T4rk1n Apr 26, 2023
b9e8030
Refactor keys reduce to ramda mapObjIndexed
T4rk1n Apr 26, 2023
16d9d29
More mapObjIndexed.
T4rk1n Apr 26, 2023
b2624f0
Remove extra path import.
T4rk1n Apr 26, 2023
50f76b6
Refactor keys forEach with for in.
T4rk1n Apr 26, 2023
cef7bc7
Add more test cases.
T4rk1n Apr 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 35 additions & 2 deletions @plotly/dash-test-components/src/components/ComponentAsProp.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,36 @@ import PropTypes from 'prop-types';


const ComponentAsProp = (props) => {
const { element, id, shapeEl, list_of_shapes, multi_components } = props;
const {
element,
id,
shapeEl,
list_of_shapes,
multi_components,
dynamic,
dynamic_list,
dynamic_dict,
dynamic_nested_list,
} = props;
return (
<div id={id}>
{shapeEl && shapeEl.header}
{element}
{shapeEl && shapeEl.footer}
{list_of_shapes && <ul>{list_of_shapes.map(e => <li key={e.value}>{e.label}</li>)}</ul> }
{multi_components && <div>{multi_components.map(m => <div id={m.id} key={m.id}>{m.first} - {m.second}</div>)}</div>}
{
dynamic && <div>{Object.keys(dynamic).map(key => <div id={key} key={key}>{dynamic[key]}</div>)}</div>
}
{
dynamic_dict && dynamic_dict.node && <div>{Object.keys(dynamic_dict.node).map(key => <div id={key} key={key}>{dynamic_dict.node[key]}</div>)}</div>
}
{
dynamic_list && <div>{dynamic_list.map((obj, i) => Object.keys(obj).map(key => <div id={key} key={key}>{obj[key]}</div>))}</div>
}
{
dynamic_nested_list && <div>{dynamic_nested_list.map((e => <>{Object.values(e.obj)}</>))}</div>
}
</div>
)
}
Expand All @@ -37,7 +59,18 @@ ComponentAsProp.propTypes = {
first: PropTypes.node,
second: PropTypes.node,
})
)
),

dynamic: PropTypes.objectOf(PropTypes.node),

dynamic_list: PropTypes.arrayOf(PropTypes.objectOf(PropTypes.node)),

dynamic_dict: PropTypes.shape({
node: PropTypes.objectOf(PropTypes.node),
}),
dynamic_nested_list: PropTypes.arrayOf(
PropTypes.shape({ obj: PropTypes.objectOf(PropTypes.node)})
),
}

export default ComponentAsProp;
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
## Fixed

- [#2508](https://github.com/plotly/dash/pull/2508) Fix error message, when callback output has different length than spec
- [#2207](https://github.com/plotly/dash/pull/2207) Fix object of components support.

## [2.9.3] - 2023-04-13

Expand Down
156 changes: 133 additions & 23 deletions dash/dash-renderer/src/TreeContainer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,15 @@ import {
has,
keys,
map,
mapObjIndexed,
mergeRight,
pick,
pickBy,
propOr,
path as rpath,
pathOr,
type
type,
toPairs
} from 'ramda';
import {notifyObservers, updateProps} from './actions';
import isSimpleComponent from './isSimpleComponent';
Expand Down Expand Up @@ -252,24 +254,48 @@ class BaseTreeContainer extends Component {

for (let i = 0; i < childrenProps.length; i++) {
const childrenProp = childrenProps[i];

const handleObject = (obj, opath) => {
return mapObjIndexed(
(node, k) => this.wrapChildrenProp(node, [...opath, k]),
obj
);
};

if (childrenProp.includes('.')) {
let path = childrenProp.split('.');
let node;
let nodeValue;
if (childrenProp.includes('[]')) {
let frontPath = [],
backPath = [],
found = false;
found = false,
hasObject = false;
path.forEach(p => {
if (!found) {
if (p.includes('[]')) {
found = true;
frontPath.push(p.replace('[]', ''));
if (p.includes('{}')) {
hasObject = true;
frontPath.push(
p.replace('{}', '').replace('[]', '')
);
} else {
frontPath.push(p.replace('[]', ''));
}
} else if (p.includes('{}')) {
hasObject = true;
frontPath.push(p.replace('{}', ''));
} else {
frontPath.push(p);
}
} else {
backPath.push(p);
if (p.includes('{}')) {
hasObject = true;
backPath.push(p.replace('{}', ''));
} else {
backPath.push(p);
}
}
});

Expand All @@ -281,38 +307,122 @@ class BaseTreeContainer extends Component {
if (!firstNode) {
continue;
}

nodeValue = node.map((element, i) => {
const elementPath = concat(
frontPath,
concat([i], backPath)
);
return assocPath(
backPath,
this.wrapChildrenProp(
let listValue;
if (hasObject) {
if (backPath.length) {
listValue = handleObject(
rpath(backPath, element),
elementPath
);
} else {
listValue = handleObject(element, elementPath);
}
} else {
listValue = this.wrapChildrenProp(
rpath(backPath, element),
elementPath
),
element
);
);
}
return assocPath(backPath, listValue, element);
});
path = frontPath;
} else {
node = rpath(path, props);
if (node === undefined) {
continue;
if (childrenProp.includes('{}')) {
// Only supports one level of nesting.
const front = [];
let dynamic = [];
let hasBack = false;
const backPath = [];

for (let j = 0; j < path.length; j++) {
const cur = path[j];
if (cur.includes('{}')) {
dynamic = concat(front, [
cur.replace('{}', '')
]);
if (j < path.length - 1) {
hasBack = true;
}
} else {
if (hasBack) {
backPath.push(cur);
} else {
front.push(cur);
}
}
}

const dynValue = rpath(dynamic, props);
if (dynValue !== undefined) {
nodeValue = toPairs(dynValue).reduce(
(acc, [k, d]) => ({
...acc,
[k]: this.wrapChildrenProp(
hasBack ? rpath(backPath, d) : d,
hasBack
? concat(
dynamic,
concat([k], backPath)
)
: concat(dynamic, [k])
)
}),
{}
);
path = dynamic;
}
} else {
node = rpath(path, props);
if (node === undefined) {
continue;
}
nodeValue = this.wrapChildrenProp(node, path);
}
nodeValue = this.wrapChildrenProp(node, path);
}
props = assocPath(path, nodeValue, props);
continue;
}
const node = props[childrenProp];
if (node !== undefined) {
props = assoc(
childrenProp,
this.wrapChildrenProp(node, [childrenProp]),
props
);
} else {
if (childrenProp.includes('{}')) {
let opath = childrenProp.replace('{}', '');
const isArray = childrenProp.includes('[]');
if (isArray) {
opath = opath.replace('[]', '');
}
const node = props[opath];

if (node !== undefined) {
if (isArray) {
for (let j = 0; j < node.length; j++) {
const aPath = concat([opath], [j]);
props = assocPath(
aPath,
handleObject(node[j], aPath),
props
);
}
} else {
props = assoc(
opath,
handleObject(node, [opath]),
props
);
}
}
} else {
const node = props[childrenProp];
if (node !== undefined) {
props = assoc(
childrenProp,
this.wrapChildrenProp(node, [childrenProp]),
props
);
}
}
}
}

Expand Down
2 changes: 1 addition & 1 deletion dash/dash-renderer/src/actions/callbacks.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ function fillVals(
inputList.map(({id, property, path: path_}: any) => ({
id,
property,
value: (path(path_, layout) as any).props[property]
value: path([...path_, 'props', property], layout) as any
})),
specs[i],
cb.anyVals,
Expand Down
Loading