Skip to content
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.

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

Wrappers #109

Merged
merged 18 commits into from Nov 22, 2019
Merged

Wrappers #109

merged 18 commits into from Nov 22, 2019

Conversation

willrogers
Copy link
Member

@TimGuiteDiamond a little rearrangement.

TooltipWrapper is now always added if a tooltip property is there.

I plan to remove the wrappers nested object, always add menu button and make alarm border a top-level boolean.

Remove configuration and make it available if a tooltip is defined.
Add default tooltip for PV widgets.
@TimGuiteDiamond
Copy link
Contributor

In principle I am happy with these changes, but they would almost certainly have a performance impact so I'm not sure how much re-testing would be necessary.

It would be disingenuous to say that we can update this many PVs at this rate when those numbers were generated using a readback widget without tooltip or otherwise.

I guess at the least I should investigate the impact before we merge this branch?

@TimGuiteDiamond
Copy link
Contributor

With respect to the nested objects, I am happy with unwrapping the wrappers etc but I think keeping containerStyling and widgetStyling separated and enclosed is useful to a widget writer because they can just inject props.style without too many worries. Otherwise we are going to need to extract quite a few props in each component and assign them again, increasing the chance that something gets missed and that things don't work properly if we change the internals of widget/pvwidget to provide a different set of style props. Something to think about?

@willrogers
Copy link
Member Author

Disingenuous eh? Surely you were already testing without a tooltip.

I think the point is that we need to make sure these performance tests are repeatable without too much grief. It will always be useful to be able to benchmark any changes we make.

Re styles: I'm not exactly sure of the pros and cons here but explicit properties are nice because you know exactly what is supported.

@TimGuiteDiamond
Copy link
Contributor

TimGuiteDiamond commented Nov 19, 2019

Yes the current tests don't use a tooltip, I would imagine that will slow it down a bit, maybe not a lot? It would be quite important that it works really well if we make it the default and I just don't have the numbers right now, but could investigate so we can make a decision before merging?

I implemented flat Readback and flat Display along with flat widget and flat PV widget here: 3d7c86b
I thought it just added a lot of work to building a component and therefore increases the chances that we will miss something. It is more explicit, I agree, but a lot of the props such as height, width, border size are not really to do with the component behaviour.

@willrogers
Copy link
Member Author

I don't think it will slow things any more than other changes we are likely to make to the widget components.

So making it easy to benchmark is the key I think.

@TimGuiteDiamond
Copy link
Contributor

Library for preparing benchmarking is here: https://gitlab.diamond.ac.uk/controls/python3/wdm_performance_test

I have changed the code such that it behaves in the way I think it did before. In some places this has required defaulting heights and widths to 100%. This is acceptable because some components do not know whether they will be wrapped in another component which will give them size or not.

However, I have removed Tooltip from **Widget**, this should be added back in but only when tooltip is required on a **Widget**.
Copy link
Contributor

@TimGuiteDiamond TimGuiteDiamond left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am yet to perform performance testing of this change, will do so once we are happy with the styling elements and ready to push.

@@ -175,7 +179,7 @@ export const Widget = (props: WidgetComponent): JSX.Element => {
let { baseWidget, widgetStyling = {}, ...baseWidgetProps } = containerProps;

// Put appropriate components on the list of components to be wrapped
let components = [baseWidget];
let components = [TooltipWrapper, baseWidget];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Default is currently to have a tooltip for a Widget, not just PVWidget

Should we change this? Widget could add tooltip if props.tooltip is not undefined?

Comment on lines 49 to 55
style={{
position: "relative",
height: "100%",
width: "100%",
...style
}}
>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Something to do with the styling of this component is not working as it should, see the flexible page for an example of how it is stretching things beyond their specified sizes. Am investigating now.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See #113

@TimGuiteDiamond
Copy link
Contributor

Performance Testing

Checked render times against the readback with no wrappers and found only small differences:

No. PVs Tooltip (ms) No Wrappers (ms)
1 7 8
10 22 23
20 35 25
100 269 211
200 546 525

This does not concern me that much

@TimGuiteDiamond
Copy link
Contributor

However, when rendering with the tooltip open, this appears:

CascadingUpdate

This is trying to tell us that we are triggering more updates within an update, and is generally a waste and a bad thing.

See these issues:

This is worthy of investigation as it adds significant overhead to the render time when the tooltip is being displayed - one readback takes around 16ms when this is happening. This appears to be an approximately constant overhead, adding more widgets does not increase the time spent in these cascaded changes. Nevertheless it is indicative of the fact that we could write this part of the code better.

@TimGuiteDiamond
Copy link
Contributor

This issue arises from the componentDidUpdate lifetime hook in the Popover package

I've looked at it a bit and I have tracked it down to the call to renderPopover within the updatePopover call. However, I am not sure how to deal with it as this class based component with hundreds of lifetime hooks is a bit out of my scope.

@willrogers are there any similar popover packages we could try out which might avoid this issue? Or can we live with it for the time being? I could create an issue but not sure how actively it is being worked on.

TimGuiteDiamond and others added 7 commits November 21, 2019 15:49
Had to add a default 100% 100% sizing to the Display component, this seems to be fine for the time being although these default sizes were not necessary before?
The menuWrapper will now appear if the widget has any actions, and any
widget may now have actions.
@TimGuiteDiamond
Copy link
Contributor

TimGuiteDiamond commented Nov 22, 2019

Some styling issues persist, perhaps changes similar to similar to #113 are required? I will investigate this with a similar approach.

Also need to provide a default description for actions so that context menu on right-click does not appear blank to user.

@TimGuiteDiamond
Copy link
Contributor

Good job on flattening the JSON though, this will work nicely with #114

TimGuiteDiamond and others added 6 commits November 22, 2019 11:19
Not a problem now but would crop up in the future if menuwrapper were to be wrapped with something else
Any widgets wrapped inside a container will gain height and width of 100% and pop to the correct size. This actually works so well that I have been able to remove a couple of default stylings, for instance from alarmBorder.module.css and the Progress page actually looks better :)
Not a problem now but would crop up in the future if menuwrapper were to be wrapped with something else
Any widgets wrapped inside a container will gain height and width of 100% and pop to the correct size. This actually works so well that I have been able to remove a couple of default stylings, for instance from alarmBorder.module.css and the Progress page actually looks better :)
@willrogers willrogers merged commit 4d57e7b into master Nov 22, 2019
@willrogers willrogers deleted the wrappers branch November 22, 2019 13:55
@TimGuiteDiamond TimGuiteDiamond mentioned this pull request Nov 22, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants