Fixing up logic around selecting/deselecting nested labels (#13)

## Summary:
There’s a bug in label studio where if you use labels for conditional labeling (creating nested labels), and don’t deselect the label you’re on before attempting to label something else, the console will throw a bunch of errors and beachball of death, forcing you to reload the page. Fixing this  by not allowing users to select a different top-level label if there are sub-labels already applied. Also not allowing users to remove a top-level label if there are sub-labels since that logically doesn't make sense.

Issue: https://khanacademy.atlassian.net/browse/DI-1502

## Test plan:
- deployed to test; see in action here: https://data-labeling-test.khanacademy.org/projects/298/data?tab=537&page=1

Author: lizfaubell

Reviewers: github-actions[bot], dat-boris

Required Reviewers:

Approved By: dat-boris

Checks: ⌛ Tests / E2E Tests, ✅ Build JS Bundle / Build, ✅ Lint / Run ESLint, ✅ Tests / Unit Tests, ✅ Build JS Bundle / Build Coverage

Pull Request URL: #13

src/examples/nested_labels/config.xml

@@ -0,0 +1,24 @@
+<View>
+  <Choices name="has_math_choice" toName="interaction" choice="single" showInLine="true">
+    <Choice value="This thread has math"/>
+    <Choice value="This thread does not have math"/>
+  </Choices>
+
+  <View style="top: 0; position: sticky; z-index: 5; background: white" visibleWhen="choice-selected" whenTagName="has_math_choice" whenChoiceValue="This thread has math">
+    <Labels name="interaction_correctness" toName="interaction">
+      <Label value="Correct" hotkey="c" hint="This statement is accurate and pedagogically sound" granularity="div" background="green"/>
+      <Label value="Incorrect: Khanmigo" hotkey="k" granularity="div" background="red"/>
+      <Label value="Incorrect: Student" hotkey="s" granularity="div" background="orange"/>
+    </Labels>
+  </View>
+
+  <View style="position: sticky; top: 32px; z-index: 5; background: white" visibleWhen="region-selected" whenTagName="interaction_correctness" whenLabelValue="Incorrect: Khanmigo">
+    <Labels name="khanmigo_incorrect_type" toName="interaction">
+      <Label alias="type-incorrect" value="Wrong calculation" hotkey="w" hint="Khanmigo calculates incorrectly, e.g. 2+2=5"  granularity="div" background="pink"/>
+      <Label alias="type-process" value="Wrong process" hotkey="p" hint="Khanmigo suggests a bad method, e.g. 'to find 2+2 you must divide'" granularity="div" background="purple"/>
+      <Label alias="type-other" value="Other" hotkey="o" hint="Use this label for any noteworthy issue that is not addressed by other labels; elaborate in Labeler Notes" granularity="div" background="blue"/>
+    </Labels>
+  </View>
+
+  <TableText name="interaction" value="$json_thread" granularity="word"/>
+</View>

src/examples/nested_labels/index.js

@@ -0,0 +1,5 @@
+import config from './config.xml';
+import tasks from './tasks.json';
+import annotation from './annotations/nested-labels.json';
+
+export const NestedLabels = { config, tasks, annotation };

src/tags/control/Label.js

@@ -157,6 +157,30 @@ const Model = types.model({
       // if that's the only selected label, the only labelset assigned to region,
       // and we are trying to unselect it, then don't allow that
       // (except for rare labelsets that allow empty labels)
+
+      // Don't allow selecting a different top-level label when we've already labeled it: DI-1502
+      if (
+        labels.selectedLabels.length === 1 &&
+        !self.selected &&
+        labels.selectedLabels[0].value !== self.value &&
+        !labels.selectedLabels[0].alias // Hack: we only gave sub-labels aliases
+      ) {
+        return false;
+      }
+
+      // If this is only top level label and there are sub labels, don't allow deselect
+      if (
+        labels.selectedLabels.length === 1 &&
+        self.selected &&
+        labels.selectedLabels[0].value === self.value &&
+        !labels.selectedLabels[0].alias && // Hack: we only gave sub-labels aliases
+        region.labelings.length > 1
+      ) {
+        console.log('can\'t deselect top level label w sub label!');
+
+        return false;
+      }
+
       if (
         labels.selectedLabels.length === 1 &&
         self.selected &&