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

DO NOT MERGE - Virtualized Tree with Sticky header Prototype #16045

Closed

Conversation

YuanboXue-Amber
Copy link
Contributor

Pull request checklist

  • Addresses an existing issue: Fixes #0000
  • Include a change request file using $ yarn change

Description of changes

Sticky tree based on fabric example https://docs.microsoft.com/en-us/javascript/api/examples/scrollablepane?view=office-ui-fabric-react-latest

Focus areas to test

(optional)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Nov 23, 2020

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 5a137b0:

Sandbox Source
Fluent UI Button Configuration
codesandbox-react-template Configuration
codesandbox-react-northstar-template Configuration

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Nov 23, 2020

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 915 885 5000
BaseButtonCompat mount 1036 1000 5000
Breadcrumb mount 44504 44591 5000
Checkbox mount 1648 1652 5000
CheckboxBase mount 1387 1407 5000
ChoiceGroup mount 5055 5075 5000
ComboBox mount 1004 1016 1000
CommandBar mount 10443 10464 1000
ContextualMenu mount 6347 6497 1000
DefaultButtonCompat mount 1212 1187 5000
DetailsRow mount 3907 3997 5000
DetailsRowFast mount 3866 3981 5000
DetailsRowNoStyles mount 3855 3789 5000
Dialog mount 1592 1539 1000
DocumentCardTitle mount 1812 1855 1000
Dropdown mount 3599 3509 5000
FocusTrapZone mount 1893 1907 5000
FocusZone mount 1938 1897 5000
IconButtonCompat mount 1924 1879 5000
Label mount 329 348 5000
Layer mount 1964 1937 5000
Link mount 496 480 5000
MenuButtonCompat mount 1570 1591 5000
MessageBar mount 2115 2115 5000
Nav mount 3593 3566 1000
OverflowSet mount 1104 1104 5000
Panel mount 1519 1461 1000
Persona mount 931 931 1000
Pivot mount 1513 1528 1000
PrimaryButtonCompat mount 1371 1378 5000
Rating mount 8368 8308 5000
SearchBox mount 1461 1474 5000
Shimmer mount 2835 2842 5000
Slider mount 2060 2084 5000
SpinButton mount 5368 5436 5000
Spinner mount 438 434 5000
SplitButtonCompat mount 3456 3346 5000
Stack mount 545 536 5000
StackWithIntrinsicChildren mount 1665 1620 5000
StackWithTextChildren mount 4936 4945 5000
SwatchColorPicker mount 10867 10982 5000
Tabs mount 1481 1491 1000
TagPicker mount 2910 3080 5000
TeachingBubble mount 12011 12194 5000
Text mount 453 473 5000
TextField mount 1446 1520 5000
ThemeProvider mount 2304 2279 5000
ThemeProvider virtual-rerender 673 674 5000
Toggle mount 881 856 5000
button mount 708 736 5000
buttonNative mount 118 111 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.52 0.56 0.93:1 2000 1042
🦄 Button.Fluent 0.14 0.28 0.5:1 5000 675
🔧 Checkbox.Fluent 0.72 0.39 1.85:1 1000 722
🎯 Dialog.Fluent 0.18 0.24 0.75:1 5000 903
🔧 Dropdown.Fluent 3.24 0.46 7.04:1 1000 3243
🔧 Icon.Fluent 0.17 0.07 2.43:1 5000 862
🎯 Image.Fluent 0.1 0.14 0.71:1 5000 480
🔧 Slider.Fluent 1.75 0.5 3.5:1 1000 1747
🔧 Text.Fluent 0.09 0.03 3:1 5000 442
🦄 Tooltip.Fluent 0.13 0.96 0.14:1 5000 647

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AccordionMinimalPerf.default 200 185 1.08:1
Text.Fluent 442 409 1.08:1
ButtonSlotsPerf.default 710 661 1.07:1
ChatWithPopoverPerf.default 561 522 1.07:1
ListMinimalPerf.default 600 561 1.07:1
SliderMinimalPerf.default 1780 1670 1.07:1
AvatarMinimalPerf.default 556 526 1.06:1
DropdownManyItemsPerf.default 882 831 1.06:1
ListNestedPerf.default 675 635 1.06:1
RadioGroupMinimalPerf.default 536 508 1.06:1
TreeWith60ListItems.default 250 235 1.06:1
FlexMinimalPerf.default 356 339 1.05:1
GridMinimalPerf.default 429 410 1.05:1
InputMinimalPerf.default 1464 1393 1.05:1
SegmentMinimalPerf.default 418 399 1.05:1
ToolbarMinimalPerf.default 1120 1069 1.05:1
Avatar.Fluent 1042 992 1.05:1
AttachmentMinimalPerf.default 194 186 1.04:1
ButtonUseCssPerf.default 953 917 1.04:1
ButtonUseCssNestingPerf.default 1254 1210 1.04:1
CheckboxMinimalPerf.default 3106 2994 1.04:1
ItemLayoutMinimalPerf.default 1504 1446 1.04:1
RefMinimalPerf.default 265 256 1.04:1
TextMinimalPerf.default 426 410 1.04:1
CardMinimalPerf.default 703 682 1.03:1
CarouselMinimalPerf.default 526 509 1.03:1
DropdownMinimalPerf.default 3244 3159 1.03:1
FormMinimalPerf.default 538 522 1.03:1
PortalMinimalPerf.default 179 174 1.03:1
SkeletonMinimalPerf.default 509 493 1.03:1
TableManyItemsPerf.default 2510 2442 1.03:1
Icon.Fluent 862 834 1.03:1
Tooltip.Fluent 647 630 1.03:1
DividerMinimalPerf.default 438 430 1.02:1
ImageMinimalPerf.default 460 452 1.02:1
ProviderMinimalPerf.default 1156 1135 1.02:1
ReactionMinimalPerf.default 495 483 1.02:1
TableMinimalPerf.default 479 470 1.02:1
Checkbox.Fluent 722 709 1.02:1
Dropdown.Fluent 3243 3171 1.02:1
AnimationMinimalPerf.default 474 467 1.01:1
ChatDuplicateMessagesPerf.default 474 467 1.01:1
ChatMinimalPerf.default 719 709 1.01:1
DialogMinimalPerf.default 903 891 1.01:1
HeaderMinimalPerf.default 439 433 1.01:1
LabelMinimalPerf.default 483 476 1.01:1
ListCommonPerf.default 771 761 1.01:1
PopupMinimalPerf.default 777 770 1.01:1
SplitButtonMinimalPerf.default 4203 4180 1.01:1
BoxMinimalPerf.default 428 426 1:1
DatepickerMinimalPerf.default 51523 51421 1:1
LayoutMinimalPerf.default 478 477 1:1
ListWith60ListItems.default 1038 1033 1:1
MenuMinimalPerf.default 986 983 1:1
CustomToolbarPrototype.default 4244 4253 1:1
TooltipMinimalPerf.default 913 914 1:1
TreeMinimalPerf.default 923 919 1:1
Button.Fluent 675 673 1:1
Dialog.Fluent 903 905 1:1
Slider.Fluent 1747 1740 1:1
AttachmentSlotsPerf.default 1244 1255 0.99:1
LoaderMinimalPerf.default 813 818 0.99:1
StatusMinimalPerf.default 840 846 0.99:1
TextAreaMinimalPerf.default 572 580 0.99:1
ButtonOverridesMissPerf.default 1873 1919 0.98:1
HeaderSlotsPerf.default 906 923 0.98:1
VideoMinimalPerf.default 763 776 0.98:1
Image.Fluent 480 488 0.98:1
AlertMinimalPerf.default 347 358 0.97:1
EmbedMinimalPerf.default 4547 4678 0.97:1
ProviderMergeThemesPerf.default 2140 2196 0.97:1
MenuButtonMinimalPerf.default 1720 1804 0.95:1
ButtonMinimalPerf.default 184 198 0.93:1
IconMinimalPerf.default 749 804 0.93:1

@size-auditor
Copy link

size-auditor bot commented Nov 23, 2020

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 16c858186809363a9e58a11e217353010116dd37 (build)

YuanboXue-Amber and others added 25 commits November 27, 2020 14:28
- remove unused tobeRenderedItemsProps null check
- separate context
- useTree takes UseTreeOptions
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
…attenTree.ts

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
…eTreeActiveState.tsx

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
…attenTree.ts

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
…eTreeActiveState.tsx

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
rename toggle function parms to make it more readable
…eTreeBehavior.tsx

Co-authored-by: ling1726 <lingfangao@hotmail.com>
…eTreeActiveState.tsx

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
…eTreeSelectState.tsx

Co-authored-by: ling1726 <lingfangao@hotmail.com>
fix bugs caused by [] childrenIds
YuanboXue-Amber and others added 25 commits November 27, 2020 15:30
…eTreeActiveState.tsx

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
…eTree.tsx

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
…eTreeActiveState.tsx

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
…eTreeActiveState.tsx

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
…eTreeActiveState.tsx

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
…eTree.tsx

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
…eTreeSelectState.tsx

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
move out getItemById again to avoid circular dep
…eTree.ts

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
…eGetItemById.ts

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
…attenTree.ts

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
@DustyTheBot
Copy link

Warnings
⚠️ There are no updates provided to CHANGELOG. Ensure there are no publicly visible changes introduced by this PR.

Generated by 🚫 dangerJS against 5a137b0

@YuanboXue-Amber YuanboXue-Amber deleted the treehook-virtual-sticky branch December 14, 2020 15:31
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

4 participants