Report Components: The Sandbox

Warcraft Logs Season of Discovery provides you with a fully-featured code IDE directly in the browser when making changes to the scripts behind your Report Components. In fact, the IDE is an embedded version of Visual Studio Code, complete with syntax highlighting, intellisense, and keyboard shortcuts. Next to the code editor is the preview pane.

Sandbox

You can leave the sandbox without keeping your changes at any time using Cancel. If you make changes that you want to keep, click Continue. Make sure to save the dashboard afterwards with Save Changes to finish making changes to your component.

Code Editor

One of the great advantages of using a full code editor is that we can provide intellisense that not only helps you to auto-complete your code, but also provides inline documentation about various properties and methods.

If you ever need to find out more about a particular symbol, simply hover over it for a tooltip.

Keyboard Shortcuts

As well as the standard text editing shortcuts for undo, redo, cut, copy, and paste, the code editor also has a wide array of keyboard shortcuts to help boost your productivity whilst programming. Here are some of the most useful ones:

Trigger Suggestion (Ctrl + Space)

Where possible, opens a popup of allowable options based on where the cursor is. For example, it can be used to see what possible values a function expects to receive for its parameter.

Rename (F2)

Safely rename all occurrences of a variable, property, function name etc. Much safer than doing find and replace!

Go To Anything (Ctrl + Shift + O)

Find any symbol based on its name or parts of its name. For example, searching "gMDA" would be a quick way to find a function named getMostDamagingAbility.

Find (Ctrl + F)

Typical text-based search, but with options for matching casing, whole words, or using regular expressions. Can also expand the box to do Find and Replace.

Go To Definition (Ctrl + Click or Ctrl + F12)

Navigate to where this symbol is defined. Useful for finding the implementation of a function or the definition of a variable.

Go To References (Shift + F12)

Find the usages of this symbol. Useful for finding where a function or variable is used.

Comment or Uncomment (Ctrl + /)

Comment out the selected line (or lines), or uncomment them if they are already commented.

Increase Indent (Tab)

Increase the current indentation level by 1.

Decrease Indent (Shift + Tab)

Decrease the current indentation level by 1.

Format Document (Alt + Shift + F)

Automatically fix the indentation across the whole script.

Preview Pane

To the right of the code editor is the preview pane.

Component Preview

When you have made changes to your script and want to preview what the new component would look like, you can click the Run button below the code editor. This will load the component in the preview pane.

If there is an error while running your component, or if your script took too long to execute, you will instead see an error.

Code Errors

Some errors in your script can be detected before it is even run (such as incorrect syntax), and these are shown in the preview pane, together with the line number and character position that the error was detected. These are detected as you type, and you won't be able to use the Run button while errors are detected.