GuidanceModal

Guidance Modal

Component used to display help information. Also responsible for lowering and raising the z-index of the html elements to be highlighted when the modal is shown.

Usage

Is created by guidance system. Not meant to store vislisaiton explaination, just how to use the component highlghted by the modal to better learn what the visulisation is trying to explain.

API Reference

Props

• guidanceInput - Array, same as guidance_branch_list used jsut ot get the titles of each branch.
• guidanceHeaderText - String, default = Help!, title of the modal
• guidanceInput - object including body of the guidance modal text (meant to explain whats going on), position of the modal, html elements to be highlighted and colour.
• prevButton - Boolean, default = false, whether or not to show the previous button, meant to only be true when using guidanceWrapper
• nextButton - Boolean, default = false, whether or not to show the next button, meant to only be true when using guidanceWrapper
• homeButton - Boolean, default = false, whether or not to show the home button, meant to only be true when using guidanceWrapper

Events

• prev-guidance emited on click of the prev button, guidanceWrapper then handles the rest
• next-guidance emited on click of the next button, guidanceWrapper then handles the rest
• close-window emited on click of the close button, guidanceSystem then handles the rest
• go-home emited on click of the home button, guidanceSystem then handles the rest

Data

• color: colorStore.color_full_list[this.guidanceInput.color_rgb] themeing colour of the guidance screen set by guidanceInput set in App.vue