diff --git a/src/components/SequenceBoard.vue b/src/components/SequenceBoard.vue index 6c338a144814cd9f2169ee5992df632143fb6cfb..3c012016b7eebb36029ad42baf89822feb93a54a 100644 --- a/src/components/SequenceBoard.vue +++ b/src/components/SequenceBoard.vue @@ -73,6 +73,8 @@ enum ClipboardStateModel { * Component props. */ const props = defineProps<{ + /** An identifier for the sequence to represent. */ + sequenceId: string /** The sequence to represent. */ sequence: string /** Groups to highlight on the sequence. */ @@ -534,6 +536,11 @@ const updateAndRedraw = (): void => { redraw() } +/** + * Exposes methods to manually trigger update & redraw of boxes. + */ +defineExpose({ update, redraw, updateAndRedraw }) + /** * Whether the sequence is visible or not. */ @@ -559,11 +566,16 @@ useResizeObserver(sequenceContainerElement, () => { /** * Sets a watcher to update and redraw when resuming sequence visibility. */ -watch([isSequenceContainerElementVisible, props], (visibility) => { - if (visibility) { - updateAndRedraw() +watch( + [isSequenceContainerElementVisible, () => props.sequenceId], + ([isSequenceContainerElementVisible, newSequenceId], [, oldSequenceId]) => { + if (isSequenceContainerElementVisible || newSequenceId !== oldSequenceId) { + setTimeout(() => { + updateAndRedraw() + }, 100) + } } -}) +) /** * The highlighted boxes currently being hovered. diff --git a/src/views/GuideView.vue b/src/views/GuideView.vue index a8ffd4ebaddbd88892a6d50eb77d3248eabcc2af..3fe085980560c4af65f779e76be68fc1052ad10d 100644 --- a/src/views/GuideView.vue +++ b/src/views/GuideView.vue @@ -775,6 +775,7 @@ const selectedGraphicsTab = ref(GraphicsTabEnum[props.initialGraphicsPanelTab]) <SequenceBoard v-if="guide?.seq" :sequence="guide.seq.replace(/T/g, 'U')" + :sequence-id="guide.id" :highlighted-groups="sequenceChunks" :legend-items="GUIDE_LEGEND_ITEMS" > diff --git a/src/views/TargetView.vue b/src/views/TargetView.vue index d3b0f743be5bda69670b32bb71028e8a97cb661e..02d65e453c7e5b70af063a0f8f185ddb98471f4f 100644 --- a/src/views/TargetView.vue +++ b/src/views/TargetView.vue @@ -683,6 +683,7 @@ const selectedGraphicsTab = ref(GraphicsTabEnum[props.initialGraphicsPanelTab]) <SequenceBoard v-if="target?.seq" :sequence="target.seq.replace(/T/g, 'U')" + :sequence-id="target.id" :highlighted-groups="sequenceChunks" :legend-items="TARGET_LEGEND_ITEMS" >