Scope selector bug

[hunterhector]

Describe the bug
Sometimes we can get the following error when using the scope selector.

TypeError: Cannot read property 'span' of undefined
TextArea
src/nlpviewer/components/TextArea.tsx:79
76 | );
77 | const currScopeAnnotation = scopeAnnotations[selectedScopeIndex];
78 |

79 | text = text.substring(
| ^ 80 | currScopeAnnotation.span.begin,
81 | currScopeAnnotation.span.end
82 | );

This is likely caused by trying to use a scope from an non-existing span. For example, if there is no Token, then using scope selector would cause this error.

To Reproduce
Steps to reproduce the behavior:

1. Prepare data: Add a datapack without entries.
2. Click which button: select one of the scope, for example, "Token" or "Sentence".
3. See error: You should see the TypeError above.

Expected behavior
Either report that this cannot be used as Scope, or do not show this in the Scope selector from the start.

Screenshots

Here is the scope selector

Environment (please complete the following information):

• OS: [e.g. Mac OS and Chrome]
• Version: Chrome 84.0
• Node Versions: v12.16.1

Additional context
Add any other context about the problem here.