Skip to content

Imperative to declarative variables

⚠️ because of performance issues caused by too many computed updates, Vue needs to be updated to at least v3.4, because it brings lazy computed updates, allowing them to not cascade reactivity updates if their result does not change.

Some variables are currently updated non-reactively, using helper functions (e.g. tracksObjectsLineCount in SequenceAlignment.vue) because they depends on HTMLElements ref which are not reactive.

However, VueUse provides composables making possible to use computed to make them reactive, like with boxStyles (still in SequenceAlign.vue, or SequenceBoard.vue).

The variable that could (maybe, feasibility have to be confirmed) be converted are:

  • updateChromosomeSVG in ChromosomeMagnify.vue & KaryotypeBoard.vue (use the same mechanism as in InteractionCard[CD|HACA].vue to build the SVG
  • updateSequenceContainerContentWidth & updateObjectsLineCount from Sequence[Alignment|Board].vue