Skip to content

Development

Jump to bottom
Bruno P. Kinoshita edited this page Sep 21, 2021 · 14 revisions

Notes about Cylc UI development.

Yarn 3 and node_modules

We upgraded to Yarn 3 but we have not replaced node_modules by the Yarn Plug'N'Play. That should be possible but work on that hasn't started yet.

Analyzing UIS deltas

It can be challenging to capture the deltas from the UIS when there are integration issues. If you are working on an issue that requires you to inspect several deltas received, you may find this workflow useful:

  1. Remove other components that have subscriptions, like GScan. That reduces the number of messages, and if you can still see the bug on another component like the Tree view, you already know GScan was not part of the problem. You can comment out the component from Drawer.vue for instance.
  2. Open a fresh tab using the final URL of the view you want to collect deltas.
  3. Set a debugger statement somewhere in the code where the bug happens. For example, if you are working on an issue where a node is missing its parent, you can modify the code using an if (!parent) { debugger }.
  4. Start your workflow. Now your view in the browser should start receiving deltas.
  5. Stop the workflow once you see the debugger starting. This way you won't have any more incoming deltas.

At this point you should have every delta collected in the Network tab. Just search by a regex string such as 20010101\|task (you must escape the |). Copy the message somewhere like https://jsonformatter.org/ to format the JSON delta, and now you should be ready to start inspecting the filtered deltas. Good luck!

Debugging with an IDE

You should be able to debug the development build (sourcemaps are not present in production) using the debugger statement. But if you use an IDE that supports running the unit tests, or even running the application, or if you connect to a running browser (Firefox has this option), the debugger may not stop in your breakpoints.

This is a known issue with our current sourcemaps configuration. See this note on how to modify one line to get the debugger to work: https://github.com/cylc/cylc-ui/blob/d86f687075b49da1136ff302acbcad58c974d877/vue.config.js#L77-L83

This is useful when you have a unit test and want to set breakpoints in your IDE in some source file like GScan.vue.

Dependabot

At the moment Dependabot is still missing Yarn 2 and Yarn 3 compatibility. We migrated to Yarn 3 due to issues with build & development dependencies (VuePress, Cypress on MacOS), which causes the Dependabot bot to fail to create ready-to-merge pull requests.

To work around this issue, you can do the following:

  • Check out the branch from dependabot (there should be a link in the pull request under the title, just click the clipboard/copy icon)
  • git checkout master yarn.lock (assuming your master branch is up to date with upstream)
  • yarn install
  • git commit -am 'Update yarn.lock with Yarn 3'
  • git push

Now wait for the bot to pick up your changes, and if CI is OK it should be good to go. There are some dependencies that cannot be updated due to compatibility issues with Vue, Vuetify, Vue-CLI, sass, etc. So waiting for CI before merging is always a good idea.

If the dependency changed is Vue, Vuetify, or another library you consider important or unstable (e.g. version 0.xx) it might be a good idea to check out the pull request locally and try - at least - the yarn run serve command and have a quick navigation in the UI. Look for errors in the browser console too.

Clone this wiki locally