Scope selector bug

**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.

Start in src/nlpviewer/components/TextArea.tsx around line 79, where the selected scope annotation is read, and reproduce the issue with a datapack without entries by selecting Token or Sentence. Check how the scope selector and missing spans are handled. Done means the empty-data case no longer raises the reported TypeError and the expected scope-selector behavior is defined.

Written by the indexing model from the issue text.