Skip to content

Instantly share code, notes, and snippets.

@mturley
Last active June 22, 2020 15:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mturley/b95fccae1a8aa4e10121dd36f0296993 to your computer and use it in GitHub Desktop.
Save mturley/b95fccae1a8aa4e10121dd36f0296993 to your computer and use it in GitHub Desktop.
Development resources for reproducing Kogito table performance issues

Hi guys, let me know if there is a more appropriate channel for this but I figured we could have a place for async discussion around the Kogito PF stuff within UXD.

For those who want to set up and run the Kogito UI code locally, it's pretty simple. Here's how you can pull down the branches I've been working on with Ajay:

git clone https://github.com/kiegroup/kogito-apps
cd kogito-apps
git remote add mturley https://github.com/mturley/kogito-apps
git fetch mturley
git checkout KOGITO-new-tabledesign
cd packages/management-console
yarn install

And then from the management-console directory you can just run yarn run dev and the UI will be served at http://localhost:9000. The process instances table we are working with is on the default page.

If you scroll to the bottom and click "Load 100 more" and then try to expand one of the rows, you'll see the lag.

The work I've been doing with Ajay is based on his branch KOGITO-new-tabledesign (https://github.com/AjayJagan/kogito-apps/commit/5de197ae493d447def2ec5f89ee9343498b65a7f, I have a mirror of it in my fork), which includes the parent/child abstraction I pitched in https://github.com/patternfly/patternfly-react/issues/3650#issuecomment-632387518 (there are some CodeSandbox links there as well, although CodeSandbox with those PF versions has been broken for the past few weeks).

I also attempted to switch to using the virtualized extension, and you can see the issues I ran into there by testing the branch on my fork. Here's that diff: https://github.com/mturley/kogito-apps/compare/KOGITO-new-tabledesign...mturley:KOGITO-virtualized-table

My main takeaway from trying the virtualized table is that it solves the performance problem but introduces a ton of quirks around alignment/sizing, and loses all of the Table features implemented inside TableBody (I had to reimplement the expandable row stuff based on core HTML). If we can't fully optimize away these perf issues without it, we could try to work through these issues with it.

Note: it looks like the directory structure of kogito-apps on master has changed since we made these branches. So we'll need to rebase them and then the install procedure will be a little different, based on skimming their new README.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment