From 790d2bee4a57fc722ec57fe3eb828fad7070a488 Mon Sep 17 00:00:00 2001
From: sairina <sairina.merinotsui@gmail.com>
Date: Wed, 20 Apr 2022 21:01:59 -0700
Subject: [PATCH 1/9] Add category field - ability to use dropdown

---
 .../components/edit/CategoryOptions.vue       | 246 ++++++++++++++++++
 .../components/edit/DetailsTabView.vue        |   6 +-
 .../channelEdit/vuex/contentNode/actions.js   |   5 +
 .../frontend/shared/constants.js              |   4 +
 .../contentcuration/frontend/shared/mixins.js |   2 +
 5 files changed, 262 insertions(+), 1 deletion(-)
 create mode 100644 contentcuration/contentcuration/frontend/channelEdit/components/edit/CategoryOptions.vue

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/CategoryOptions.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/CategoryOptions.vue
new file mode 100644
index 0000000000..ebc28c326c
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/CategoryOptions.vue
@@ -0,0 +1,246 @@
+<template>
+
+  <div id="app">
+    <VAutocomplete
+      v-model="selected"
+      :items="categoriesList"
+      :searchInput.sync="categoryText"
+      :label="translateMetadataString('category')"
+      box
+      clearable
+      chips
+      deletableChips
+      multiple
+      item-value="value"
+      item-text="text"
+    >
+
+      <template v-slot:selection="data">
+        <VTooltip bottom>
+          <template v-slot:activator="{ on, attrs }">
+            <VChip
+              v-bind="attrs"
+              close
+              v-on="on"
+              @input="remove(data.item)"
+            >
+              {{ data.item.text }}
+            </VChip>
+          </template>
+          <div>
+            <div>{{ tooltipHelper(data.item.value) }}</div>
+          </div>
+        </VTooltip>
+      </template>
+
+      <template v-slot:no-data>
+        <VListTile v-if="categoryText && categoryText.trim()">
+          <VListTileContent>
+            <VListTileTitle>
+              {{ $tr('noCategoryFoundText', { text: categoryText.trim() }) }}
+            </VListTileTitle>
+          </VListTileContent>
+        </VListTile>
+      </template>
+
+      <template v-slot:item="{ item }">
+        <!--
+          `@click.stop` to prevent from propagating
+          checkboxes updates to VAutocomplete automatically
+          so that we can use our own handlers instead
+        -->
+        <div style="width: 100%; height: 100%;" aria-hidden="true">
+          <VDivider v-if="!item.value.includes('.')" />
+          <KCheckbox
+            v-model="selected"
+            :checked="dropdownSelected.includes(item.value)"
+            :label="item.text"
+            :value="item.value"
+            style="margin-top: 10px"
+            :style="treeItemStyle(item)"
+            :ripple="false"
+            @click.stop
+          />
+        </div>
+      </template>
+    </VAutocomplete>
+  </div>
+
+</template>
+
+<script>
+
+  import { camelCase } from 'lodash';
+  import { constantsTranslationMixin, metadataTranslationMixin } from 'shared/mixins';
+  import { Categories, CategoriesLookup } from 'shared/constants';
+
+  const availablePaths = {};
+  const categoriesObj = {};
+  const dropdown = [];
+
+  Object.assign(availablePaths, CategoriesLookup);
+
+  /*
+   * This is used to create the categories object from which the dropdown list is generated
+   * and is the same as this to make sure the order in Kolibri and Studio are the same:
+   * https://github.com/learningequality/kolibri/blob/develop/kolibri/plugins/learn/assets/
+   *   src/views/CategorySearchModal/CategorySearchOptions.vue#L73
+   */
+  for (let subjectKey of Object.entries(Categories)
+    .sort((a, b) => a[1].length - b[1].length)
+    .map(a => a[0])) {
+    const ids = Categories[subjectKey].split('.');
+
+    let path = '';
+    let nested = categoriesObj;
+    for (let fragment of ids) {
+      path += fragment;
+      if (availablePaths[path]) {
+        const nestedKey = CategoriesLookup[path];
+        if (!nested[nestedKey]) {
+          nested[nestedKey] = {
+            value: path,
+            nested: {},
+          };
+        }
+        nested = nested[nestedKey].nested;
+        path += '.';
+      } else {
+        break;
+      }
+    }
+  }
+
+  const flattenCategories = obj => {
+    Object.keys(obj).forEach(key => {
+      if (key !== 'value' && key !== 'nested') {
+        dropdown.push({
+          text: key,
+          value: obj[key]['value'],
+        });
+      }
+      if (typeof obj[key] === 'object') {
+        flattenCategories(obj[key]);
+      }
+    });
+    return dropdown;
+  };
+
+  const findFamilyTreeIds = value => {
+    const family = [];
+    let familyMember = value;
+    while (familyMember) {
+      family.push(familyMember);
+      familyMember = familyMember.includes('.')
+        ? familyMember.substring(0, familyMember.lastIndexOf('.'))
+        : null;
+    }
+    return family;
+  };
+
+  function displayFamilyTree(nodes, id) {
+    return nodes.filter(node => findFamilyTreeIds(id).includes(node.value));
+  }
+
+  export default {
+    name: 'CategoryOptions',
+    mixins: [constantsTranslationMixin, metadataTranslationMixin],
+    props: {
+      value: {
+        type: Array,
+        default: () => [],
+      },
+    },
+    data() {
+      return {
+        categoryText: null,
+        chipsSelected: [],
+        dropdownSelected: [],
+        nested: true,
+      };
+    },
+    computed: {
+      categoriesList() {
+        flattenCategories(categoriesObj);
+        return dropdown.map(category => {
+          return {
+            ...category,
+            text: this.translateMetadataString(camelCase(category.text)),
+            level: this.findDepth(Categories[category.text]),
+          };
+        });
+      },
+      selected: {
+        get() {
+          return this.value;
+        },
+        set(value) {
+          let items = value.map(item => item);
+          let addedItem = items[items.length - 1];
+
+          let parents = findFamilyTreeIds(addedItem).filter(
+            familyMember => familyMember !== addedItem
+          );
+
+          // If removing an item
+          if (this.chipsSelected.length > items.length) {
+            this.chipsSelected = items;
+            this.dropdownSelected = [...value, ...parents];
+          } else {
+            // If the addedItem is already something checked in the dropdown
+            if (this.dropdownSelected.includes(addedItem)) {
+              this.dropdownSelected = this.dropdownSelected.filter(
+                item => !item.includes(addedItem)
+              );
+              this.chipsSelected = this.dropdownSelected;
+            } else {
+              // If adding a brand new item
+              this.dropdownSelected = [...items, ...parents];
+
+              // If selecting a child item when parent is checked
+              if (items.filter(item => parents.indexOf(item) !== -1)) {
+                this.chipsSelected = items.filter(item => parents.indexOf(item) === -1);
+              } else {
+                this.chipsSelected = items;
+              }
+            }
+          }
+
+          this.$emit('input', this.chipsSelected);
+        },
+      },
+    },
+    watch: {
+      categoryText(val) {
+        return !val ? (this.nested = true) : (this.nested = false);
+      },
+    },
+    methods: {
+      treeItemStyle(item) {
+        return this.nested ? { paddingLeft: `${item.level * 24}px` } : {};
+      },
+      remove(item) {
+        this.chipsSelected.splice(this.chipsSelected.indexOf(item.id), 1);
+      },
+      tooltipHelper(id) {
+        return displayFamilyTree(dropdown, id)
+          .map(node => this.translateMetadataString(camelCase(node.text)))
+          .join(' - ');
+      },
+      findDepth(val) {
+        return val.split('.').length - 1;
+      },
+    },
+    $trs: {
+      noCategoryFoundText: 'Category not found',
+    },
+  };
+
+</script>
+<style lang="less" scoped>
+
+  /deep/ .v-list__tile {
+    flex-wrap: wrap;
+  }
+
+</style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
index 1cebc6c074..f8f14c6f19 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
@@ -106,6 +106,8 @@
               </VCombobox>
             </VFlex>
           </VLayout>
+          <!-- Category -->
+          <CategoryOptions ref="categories" v-model="categories" />
         </VFlex>
       </VLayout>
 
@@ -366,6 +368,7 @@
   import LevelsOptions from './LevelsOptions.vue';
   import ResourcesNeededOptions from './ResourcesNeededOptions.vue';
   import LearningActivityOptions from './LearningActivityOptions.vue';
+  import CategoryOptions from './CategoryOptions.vue';
 
   import {
     getTitleValidators,
@@ -459,6 +462,7 @@
       LevelsOptions,
       ResourcesNeededOptions,
       LearningActivityOptions,
+      CategoryOptions,
     },
     mixins: [constantsTranslationMixin, metadataTranslationMixin],
     props: {
@@ -541,7 +545,7 @@
       contentLevel: generateNestedNodesGetterSetter('grade_levels'),
       resourcesNeeded: generateNestedNodesGetterSetter('learner_needs'),
       contentLearningActivities: generateNestedNodesGetterSetter('learning_activities'),
-
+      categories: generateNestedNodesGetterSetter('categories'),
       mastery_model() {
         return this.getExtraFieldsValueFromNodes('mastery_model');
       },
diff --git a/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/actions.js b/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/actions.js
index c608db3528..fc4b4e872c 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/actions.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/actions.js
@@ -181,6 +181,7 @@ export function createContentNode(context, { parent, kind, ...payload }) {
     grade_levels: {},
     learner_needs: {},
     learning_activities: {},
+    categories: {},
     ...payload,
   };
 
@@ -217,6 +218,7 @@ function generateContentNodeData({
   grade_levels = NOVALUE,
   learner_needs = NOVALUE,
   learning_activities = NOVALUE,
+  categories = NOVALUE,
 } = {}) {
   const contentNodeData = {};
   if (title !== NOVALUE) {
@@ -267,6 +269,9 @@ function generateContentNodeData({
   if (learning_activities !== NOVALUE) {
     contentNodeData.learning_activities = learning_activities;
   }
+  if (categories !== NOVALUE) {
+    contentNodeData.categories = categories;
+  }
 
   if (extra_fields !== NOVALUE) {
     contentNodeData.extra_fields = contentNodeData.extra_fields || {};
diff --git a/contentcuration/contentcuration/frontend/shared/constants.js b/contentcuration/contentcuration/frontend/shared/constants.js
index c7af961529..100c8a579d 100644
--- a/contentcuration/contentcuration/frontend/shared/constants.js
+++ b/contentcuration/contentcuration/frontend/shared/constants.js
@@ -1,3 +1,5 @@
+import invert from 'lodash/invert';
+import Subjects from 'kolibri-constants/labels/Subjects';
 import featureFlagsSchema from 'static/feature_flags.json';
 
 export { default as LearningActivities } from 'kolibri-constants/labels/LearningActivities';
@@ -8,6 +10,8 @@ export { default as AccessibilityCategories } from 'kolibri-constants/labels/Acc
 export { default as ContentLevels } from 'kolibri-constants/labels/Levels';
 export { default as ResourcesNeededTypes } from 'kolibri-constants/labels/Needs';
 
+export const CategoriesLookup = invert(Subjects);
+
 export const ContentDefaults = {
   author: 'author',
   provider: 'provider',
diff --git a/contentcuration/contentcuration/frontend/shared/mixins.js b/contentcuration/contentcuration/frontend/shared/mixins.js
index b7bedbaa60..8c64e09d66 100644
--- a/contentcuration/contentcuration/frontend/shared/mixins.js
+++ b/contentcuration/contentcuration/frontend/shared/mixins.js
@@ -674,6 +674,8 @@ const nonconformingKeys = {
   BASIC_SKILLS: 'allLevelsBasicSkills',
   FOUNDATIONS: 'basicSkills',
   foundationsLogicAndCriticalThinking: 'logicAndCriticalThinking',
+  toolsAndSoftwareTraining: 'softwareToolsAndTraining',
+  foundations: 'basicSkills',
 
   /*
    * TODO: the following are in ResourcesNeededTypes map from le-utils, but not in Kolibri,

From 0e0fd400fb7bd43b77dc66ca5d7a939cdaffeb2f Mon Sep 17 00:00:00 2001
From: sairina <sairina.merinotsui@gmail.com>
Date: Fri, 22 Apr 2022 21:22:15 -0700
Subject: [PATCH 2/9] Add category field - all behaviors in dropdown accounted
 for

---
 .../components/edit/CategoryOptions.vue       | 55 +++++++++++++------
 1 file changed, 38 insertions(+), 17 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/CategoryOptions.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/CategoryOptions.vue
index ebc28c326c..d6f5014ef5 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/CategoryOptions.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/CategoryOptions.vue
@@ -22,7 +22,7 @@
               v-bind="attrs"
               close
               v-on="on"
-              @input="remove(data.item)"
+              @input="remove(data.item.value)"
             >
               {{ data.item.text }}
             </VChip>
@@ -70,7 +70,7 @@
 
 <script>
 
-  import { camelCase } from 'lodash';
+  import { camelCase, intersection } from 'lodash';
   import { constantsTranslationMixin, metadataTranslationMixin } from 'shared/mixins';
   import { Categories, CategoriesLookup } from 'shared/constants';
 
@@ -175,37 +175,56 @@
           return this.value;
         },
         set(value) {
-          let items = value.map(item => item);
-          let addedItem = items[items.length - 1];
+          let items = [...value];
+          let currentItem = items[items.length - 1];
 
-          let parents = findFamilyTreeIds(addedItem).filter(
-            familyMember => familyMember !== addedItem
+          let parents = findFamilyTreeIds(currentItem).filter(
+            familyMember => familyMember !== currentItem
           );
+          let rootParent = parents[0];
 
           // If removing an item
           if (this.chipsSelected.length > items.length) {
+            if (items.length === 0) {
+              this.dropdownSelected = [];
+            } else {
+              this.dropdownSelected = intersection([
+                ...this.dropdownSelected,
+                ...items,
+                ...parents,
+              ]);
+            }
             this.chipsSelected = items;
-            this.dropdownSelected = [...value, ...parents];
           } else {
-            // If the addedItem is already something checked in the dropdown
-            if (this.dropdownSelected.includes(addedItem)) {
+            // If the currentItem is already included in the dropdown and we need to remove it
+            if (this.dropdownSelected.includes(currentItem)) {
               this.dropdownSelected = this.dropdownSelected.filter(
-                item => !item.includes(addedItem)
+                item => !item.includes(currentItem)
               );
-              this.chipsSelected = this.dropdownSelected;
+              if (rootParent) {
+                this.chipsSelected = [
+                  ...this.chipsSelected.filter(item => !item.includes(currentItem)),
+                  rootParent,
+                ];
+              } else {
+                this.chipsSelected = [
+                  ...this.chipsSelected.filter(item => !item.includes(currentItem)),
+                ];
+              }
             } else {
-              // If adding a brand new item
-              this.dropdownSelected = [...items, ...parents];
+              // If adding a brand new item, change dropdown
+              this.dropdownSelected = intersection([
+                ...this.dropdownSelected,
+                ...items,
+                ...parents,
+              ]);
 
               // If selecting a child item when parent is checked
               if (items.filter(item => parents.indexOf(item) !== -1)) {
                 this.chipsSelected = items.filter(item => parents.indexOf(item) === -1);
-              } else {
-                this.chipsSelected = items;
               }
             }
           }
-
           this.$emit('input', this.chipsSelected);
         },
       },
@@ -220,7 +239,9 @@
         return this.nested ? { paddingLeft: `${item.level * 24}px` } : {};
       },
       remove(item) {
-        this.chipsSelected.splice(this.chipsSelected.indexOf(item.id), 1);
+        this.chipsSelected.splice(this.chipsSelected.indexOf(item), 1);
+        this.dropdownSelected.splice(this.dropdownSelected.indexOf(item), 1);
+        this.$emit('input', this.chipsSelected);
       },
       tooltipHelper(id) {
         return displayFamilyTree(dropdown, id)

From bde7faac2c2e93d516202979e1effc0944f95842 Mon Sep 17 00:00:00 2001
From: sairina <sairina.merinotsui@gmail.com>
Date: Sat, 23 Apr 2022 14:28:53 -0700
Subject: [PATCH 3/9] Initial implementation of category chips behavior

---
 .../components/edit/CategoryOptions.vue       | 91 +++++++++++++------
 1 file changed, 64 insertions(+), 27 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/CategoryOptions.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/CategoryOptions.vue
index d6f5014ef5..67a9ee780b 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/CategoryOptions.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/CategoryOptions.vue
@@ -14,16 +14,10 @@
       item-value="value"
       item-text="text"
     >
-
       <template v-slot:selection="data">
         <VTooltip bottom>
           <template v-slot:activator="{ on, attrs }">
-            <VChip
-              v-bind="attrs"
-              close
-              v-on="on"
-              @input="remove(data.item.value)"
-            >
+            <VChip v-bind="attrs" close v-on="on" @input="remove(data.item.value)">
               {{ data.item.text }}
             </VChip>
           </template>
@@ -49,7 +43,7 @@
           checkboxes updates to VAutocomplete automatically
           so that we can use our own handlers instead
         -->
-        <div style="width: 100%; height: 100%;" aria-hidden="true">
+        <div style="width: 100%; height: 100%" aria-hidden="true">
           <VDivider v-if="!item.value.includes('.')" />
           <KCheckbox
             v-model="selected"
@@ -126,22 +120,6 @@
     return dropdown;
   };
 
-  const findFamilyTreeIds = value => {
-    const family = [];
-    let familyMember = value;
-    while (familyMember) {
-      family.push(familyMember);
-      familyMember = familyMember.includes('.')
-        ? familyMember.substring(0, familyMember.lastIndexOf('.'))
-        : null;
-    }
-    return family;
-  };
-
-  function displayFamilyTree(nodes, id) {
-    return nodes.filter(node => findFamilyTreeIds(id).includes(node.value));
-  }
-
   export default {
     name: 'CategoryOptions',
     mixins: [constantsTranslationMixin, metadataTranslationMixin],
@@ -178,7 +156,7 @@
           let items = [...value];
           let currentItem = items[items.length - 1];
 
-          let parents = findFamilyTreeIds(currentItem).filter(
+          let parents = this.findFamilyTreeIds(currentItem).filter(
             familyMember => familyMember !== currentItem
           );
           let rootParent = parents[0];
@@ -197,11 +175,13 @@
             this.chipsSelected = items;
           } else {
             // If the currentItem is already included in the dropdown and we need to remove it
+            // but it does not exist in the chips array because it is only visually represented
             if (this.dropdownSelected.includes(currentItem)) {
               this.dropdownSelected = this.dropdownSelected.filter(
                 item => !item.includes(currentItem)
               );
               if (rootParent) {
+                // If the root parent exists, then we need to change the chips
                 this.chipsSelected = [
                   ...this.chipsSelected.filter(item => !item.includes(currentItem)),
                   rootParent,
@@ -228,6 +208,15 @@
           this.$emit('input', this.chipsSelected);
         },
       },
+      dropdownSelectedObj() {
+        return this.dropdownSelected.map(item => {
+          return {
+            text: this.translateMetadataString(camelCase(CategoriesLookup[item])),
+            value: item,
+            level: this.findDepth(item),
+          };
+        });
+      },
     },
     watch: {
       categoryText(val) {
@@ -240,17 +229,65 @@
       },
       remove(item) {
         this.chipsSelected.splice(this.chipsSelected.indexOf(item), 1);
-        this.dropdownSelected.splice(this.dropdownSelected.indexOf(item), 1);
+        this.updateDropdownSelected(item);
         this.$emit('input', this.chipsSelected);
       },
       tooltipHelper(id) {
-        return displayFamilyTree(dropdown, id)
+        return this.displayFamilyTree(dropdown, id)
           .map(node => this.translateMetadataString(camelCase(node.text)))
           .join(' - ');
       },
       findDepth(val) {
         return val.split('.').length - 1;
       },
+      displayFamilyTree(nodes, id) {
+        return nodes.filter(node => this.findFamilyTreeIds(id).includes(node.value));
+      },
+      findFamilyTreeIds(value) {
+        const family = [];
+        let familyMember = value;
+        while (familyMember) {
+          family.push(familyMember);
+          familyMember = familyMember.includes('.')
+            ? familyMember.substring(0, familyMember.lastIndexOf('.'))
+            : null;
+        }
+        return family;
+      },
+      /**
+       * This function is used to update the dropdown list when an item is removed
+       * from chipsSelected array.
+       * @param {string} chip - The value of the chip that was removed
+       */
+      updateDropdownSelected(chip) {
+        let directParent = chip.substring(0, chip.lastIndexOf('.'));
+        let potentialSiblings = this.dropdownSelectedObj.filter(
+          item => item.level === this.findDepth(chip) && item.value !== chip
+        );
+        let numberOfSiblings = potentialSiblings.filter(item => item.value.includes(directParent))
+          .length;
+        let numberOfSiblingsOfParent =
+          this.dropdownSelectedObj.filter(item => item.level === this.findDepth(chip) - 1).length -
+          1;
+
+        if (
+          (numberOfSiblingsOfParent > 0 && numberOfSiblings > 0) ||
+          (numberOfSiblingsOfParent === 0 && numberOfSiblings > 0)
+        ) {
+          // Remove only chip
+          this.dropdownSelected = this.dropdownSelected.filter(item => !item.includes(chip));
+        } else if (numberOfSiblingsOfParent > 0 && numberOfSiblings === 0) {
+          // Remove only chip and direct parent
+          this.dropdownSelected = this.dropdownSelected.filter(
+            item => !item.includes(directParent)
+          );
+        } else if (numberOfSiblingsOfParent === 0 && numberOfSiblings === 0) {
+          // Remove entire family tree
+          this.dropdownSelected = this.dropdownSelected.filter(
+            item => this.findFamilyTreeIds(chip).indexOf(item) === -1
+          );
+        }
+      },
     },
     $trs: {
       noCategoryFoundText: 'Category not found',

From db3da62c977489957f7fa09efdaa680c07dda73a Mon Sep 17 00:00:00 2001
From: sairina <sairina.merinotsui@gmail.com>
Date: Mon, 25 Apr 2022 17:32:56 -0700
Subject: [PATCH 4/9] Write tests and update code to match

---
 .../components/edit/CategoryOptions.vue       | 138 ++----
 .../edit/__tests__/categoryOptions.spec.js    | 438 ++++++++++++++++++
 2 files changed, 486 insertions(+), 90 deletions(-)
 create mode 100644 contentcuration/contentcuration/frontend/channelEdit/components/edit/__tests__/categoryOptions.spec.js

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/CategoryOptions.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/CategoryOptions.vue
index 67a9ee780b..a3b00df88d 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/CategoryOptions.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/CategoryOptions.vue
@@ -38,11 +38,6 @@
       </template>
 
       <template v-slot:item="{ item }">
-        <!--
-          `@click.stop` to prevent from propagating
-          checkboxes updates to VAutocomplete automatically
-          so that we can use our own handlers instead
-        -->
         <div style="width: 100%; height: 100%" aria-hidden="true">
           <VDivider v-if="!item.value.includes('.')" />
           <KCheckbox
@@ -53,7 +48,6 @@
             style="margin-top: 10px"
             :style="treeItemStyle(item)"
             :ripple="false"
-            @click.stop
           />
         </div>
       </template>
@@ -64,7 +58,7 @@
 
 <script>
 
-  import { camelCase, intersection } from 'lodash';
+  import { camelCase } from 'lodash';
   import { constantsTranslationMixin, metadataTranslationMixin } from 'shared/mixins';
   import { Categories, CategoriesLookup } from 'shared/constants';
 
@@ -120,6 +114,8 @@
     return dropdown;
   };
 
+  flattenCategories(categoriesObj);
+
   export default {
     name: 'CategoryOptions',
     mixins: [constantsTranslationMixin, metadataTranslationMixin],
@@ -133,13 +129,11 @@
       return {
         categoryText: null,
         chipsSelected: [],
-        dropdownSelected: [],
         nested: true,
       };
     },
     computed: {
       categoriesList() {
-        flattenCategories(categoriesObj);
         return dropdown.map(category => {
           return {
             ...category,
@@ -148,63 +142,22 @@
           };
         });
       },
+      dropdownSelected() {
+        return [
+          ...new Set(
+            this.chipsSelected.reduce((a, chip) => a.concat(this.findFamilyTreeIds(chip)), [])
+          ),
+        ];
+      },
       selected: {
         get() {
           return this.value;
         },
         set(value) {
           let items = [...value];
-          let currentItem = items[items.length - 1];
-
-          let parents = this.findFamilyTreeIds(currentItem).filter(
-            familyMember => familyMember !== currentItem
-          );
-          let rootParent = parents[0];
-
-          // If removing an item
-          if (this.chipsSelected.length > items.length) {
-            if (items.length === 0) {
-              this.dropdownSelected = [];
-            } else {
-              this.dropdownSelected = intersection([
-                ...this.dropdownSelected,
-                ...items,
-                ...parents,
-              ]);
-            }
-            this.chipsSelected = items;
-          } else {
-            // If the currentItem is already included in the dropdown and we need to remove it
-            // but it does not exist in the chips array because it is only visually represented
-            if (this.dropdownSelected.includes(currentItem)) {
-              this.dropdownSelected = this.dropdownSelected.filter(
-                item => !item.includes(currentItem)
-              );
-              if (rootParent) {
-                // If the root parent exists, then we need to change the chips
-                this.chipsSelected = [
-                  ...this.chipsSelected.filter(item => !item.includes(currentItem)),
-                  rootParent,
-                ];
-              } else {
-                this.chipsSelected = [
-                  ...this.chipsSelected.filter(item => !item.includes(currentItem)),
-                ];
-              }
-            } else {
-              // If adding a brand new item, change dropdown
-              this.dropdownSelected = intersection([
-                ...this.dropdownSelected,
-                ...items,
-                ...parents,
-              ]);
+          let currentItem = items[items.length - 1] || '';
 
-              // If selecting a child item when parent is checked
-              if (items.filter(item => parents.indexOf(item) !== -1)) {
-                this.chipsSelected = items.filter(item => parents.indexOf(item) === -1);
-              }
-            }
-          }
+          this.handleCheckboxItem(currentItem, items);
           this.$emit('input', this.chipsSelected);
         },
       },
@@ -229,7 +182,6 @@
       },
       remove(item) {
         this.chipsSelected.splice(this.chipsSelected.indexOf(item), 1);
-        this.updateDropdownSelected(item);
         this.$emit('input', this.chipsSelected);
       },
       tooltipHelper(id) {
@@ -254,38 +206,44 @@
         }
         return family;
       },
-      /**
-       * This function is used to update the dropdown list when an item is removed
-       * from chipsSelected array.
-       * @param {string} chip - The value of the chip that was removed
-       */
-      updateDropdownSelected(chip) {
-        let directParent = chip.substring(0, chip.lastIndexOf('.'));
-        let potentialSiblings = this.dropdownSelectedObj.filter(
-          item => item.level === this.findDepth(chip) && item.value !== chip
+      handleCheckboxItem(item, items) {
+        const parents = this.findFamilyTreeIds(item).filter(familyMember => familyMember !== item);
+        const rootParent = parents[0];
+        const directParent = item.substring(0, item.lastIndexOf('.')) || null;
+        const potentialSiblings = this.dropdownSelectedObj.filter(
+          checkedItem => checkedItem.level === this.findDepth(item) && checkedItem.value !== item
         );
-        let numberOfSiblings = potentialSiblings.filter(item => item.value.includes(directParent))
-          .length;
-        let numberOfSiblingsOfParent =
-          this.dropdownSelectedObj.filter(item => item.level === this.findDepth(chip) - 1).length -
-          1;
+        const numberOfSiblings = potentialSiblings.filter(sibling =>
+          sibling.value.includes(directParent)
+        ).length;
 
-        if (
-          (numberOfSiblingsOfParent > 0 && numberOfSiblings > 0) ||
-          (numberOfSiblingsOfParent === 0 && numberOfSiblings > 0)
-        ) {
-          // Remove only chip
-          this.dropdownSelected = this.dropdownSelected.filter(item => !item.includes(chip));
-        } else if (numberOfSiblingsOfParent > 0 && numberOfSiblings === 0) {
-          // Remove only chip and direct parent
-          this.dropdownSelected = this.dropdownSelected.filter(
-            item => !item.includes(directParent)
-          );
-        } else if (numberOfSiblingsOfParent === 0 && numberOfSiblings === 0) {
-          // Remove entire family tree
-          this.dropdownSelected = this.dropdownSelected.filter(
-            item => this.findFamilyTreeIds(chip).indexOf(item) === -1
-          );
+        // If removing a checked item that is listed as a chip in the autocomplete bar
+        if (this.chipsSelected.length > items.length) {
+          this.chipsSelected = items;
+        } else {
+          // Behaviors for items not listed as chips in the autocomplete bar
+          if (this.dropdownSelected.includes(item)) {
+            if (rootParent) {
+              // If checked item has a sibling
+              if (numberOfSiblings > 0) {
+                this.chipsSelected = this.chipsSelected.filter(
+                  chip => !chip.includes(item) && chip !== rootParent
+                );
+              } else {
+                this.chipsSelected = [
+                  ...this.chipsSelected.filter(chip => !chip.includes(item)),
+                  rootParent,
+                ];
+              }
+            } else {
+              this.chipsSelected = [...this.chipsSelected.filter(chip => !chip.includes(item))];
+            }
+          } else {
+            // If selecting a child item when parent has already been checked
+            if (items.filter(val => parents.indexOf(val) !== -1)) {
+              this.chipsSelected = items.filter(val => parents.indexOf(val) === -1);
+            }
+          }
         }
       },
     },
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/__tests__/categoryOptions.spec.js b/contentcuration/contentcuration/frontend/channelEdit/components/edit/__tests__/categoryOptions.spec.js
new file mode 100644
index 0000000000..a63c9a0d85
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/__tests__/categoryOptions.spec.js
@@ -0,0 +1,438 @@
+import Vue from 'vue';
+import Vuetify from 'vuetify';
+import { shallowMount } from '@vue/test-utils';
+import CategoryOptions from '../CategoryOptions.vue';
+
+Vue.use(Vuetify);
+
+const testDropdown = [
+  {
+    text: 'DAILY_LIFE',
+    value: 'PbGoe2MV',
+  },
+  {
+    text: 'CURRENT_EVENTS',
+    value: 'PbGoe2MV.J7CU1IxN',
+  },
+  {
+    text: 'DIVERSITY',
+    value: 'PbGoe2MV.EHcbjuKq',
+  },
+  {
+    text: 'ENTREPRENEURSHIP',
+    value: 'PbGoe2MV.kyxTNsRS',
+  },
+  {
+    text: 'ENVIRONMENT',
+    value: 'PbGoe2MV.tS7WKnZ7',
+  },
+  {
+    text: 'FINANCIAL_LITERACY',
+    value: 'PbGoe2MV.HGIc9sZq',
+  },
+  {
+    text: 'MEDIA_LITERACY',
+    value: 'PbGoe2MV.UOTL#KIV',
+  },
+  {
+    text: 'MENTAL_HEALTH',
+    value: 'PbGoe2MV.d8&gCo2N',
+  },
+  {
+    text: 'PUBLIC_HEALTH',
+    value: 'PbGoe2MV.kivAZaeX',
+  },
+  {
+    text: 'FOR_TEACHERS',
+    value: 'ziJ6PCuU',
+  },
+  {
+    text: 'GUIDES',
+    value: 'ziJ6PCuU.RLfhp37t',
+  },
+  {
+    text: 'LESSON_PLANS',
+    value: 'ziJ6PCuU.lOBPr5ix',
+  },
+  {
+    text: 'FOUNDATIONS',
+    value: 'BCG3&slG',
+  },
+  {
+    text: 'DIGITAL_LITERACY',
+    value: 'BCG3&slG.wZ3EAedB',
+  },
+  {
+    text: 'FOUNDATIONS_LOGIC_AND_CRITICAL_THINKING',
+    value: 'BCG3&slG.0&d0qTqS',
+  },
+  {
+    text: 'LEARNING_SKILLS',
+    value: 'BCG3&slG.fP2j70bj',
+  },
+  {
+    text: 'LITERACY',
+    value: 'BCG3&slG.HLo9TbNq',
+  },
+  {
+    text: 'NUMERACY',
+    value: 'BCG3&slG.Tsyej9ta',
+  },
+  {
+    text: 'SCHOOL',
+    value: 'd&WXdXWF',
+  },
+  {
+    text: 'ARTS',
+    value: 'd&WXdXWF.5QAjgfv7',
+  },
+  {
+    text: 'DANCE',
+    value: 'd&WXdXWF.5QAjgfv7.BUMJJBnS',
+  },
+  {
+    text: 'DRAMA',
+    value: 'd&WXdXWF.5QAjgfv7.XsWznP4o',
+  },
+  {
+    text: 'MUSIC',
+    value: 'd&WXdXWF.5QAjgfv7.u0aKjT4i',
+  },
+  {
+    text: 'VISUAL_ART',
+    value: 'd&WXdXWF.5QAjgfv7.4LskOFXj',
+  },
+  {
+    text: 'COMPUTER_SCIENCE',
+    value: 'd&WXdXWF.e#RTW9E#',
+  },
+  {
+    text: 'MECHANICAL_ENGINEERING',
+    value: 'd&WXdXWF.e#RTW9E#.8ZoaPsVW',
+  },
+  {
+    text: 'PROGRAMMING',
+    value: 'd&WXdXWF.e#RTW9E#.CfnlTDZ#',
+  },
+  {
+    text: 'WEB_DESIGN',
+    value: 'd&WXdXWF.e#RTW9E#.P7s8FxQ8',
+  },
+  {
+    text: 'HISTORY',
+    value: 'd&WXdXWF.zWtcJ&F2',
+  },
+  {
+    text: 'LANGUAGE_LEARNING',
+    value: 'd&WXdXWF.JDUfJNXc',
+  },
+  {
+    text: 'MATHEMATICS',
+    value: 'd&WXdXWF.qs0Xlaxq',
+  },
+  {
+    text: 'ALGEBRA',
+    value: 'd&WXdXWF.qs0Xlaxq.0t5msbL5',
+  },
+  {
+    text: 'ARITHMETIC',
+    value: 'd&WXdXWF.qs0Xlaxq.nG96nHDc',
+  },
+  {
+    text: 'CALCULUS',
+    value: 'd&WXdXWF.qs0Xlaxq.8rJ57ht6',
+  },
+  {
+    text: 'GEOMETRY',
+    value: 'd&WXdXWF.qs0Xlaxq.lb7ELcK5',
+  },
+  {
+    text: 'STATISTICS',
+    value: 'd&WXdXWF.qs0Xlaxq.jNm15RLB',
+  },
+  {
+    text: 'READING_AND_WRITING',
+    value: 'd&WXdXWF.kHKJ&PbV',
+  },
+  {
+    text: 'LITERATURE',
+    value: 'd&WXdXWF.kHKJ&PbV.DJLBbaEk',
+  },
+  {
+    text: 'LOGIC_AND_CRITICAL_THINKING',
+    value: 'd&WXdXWF.kHKJ&PbV.YMBXStib',
+  },
+  {
+    text: 'READING_COMPREHENSION',
+    value: 'd&WXdXWF.kHKJ&PbV.r7RxB#9t',
+  },
+  {
+    text: 'WRITING',
+    value: 'd&WXdXWF.kHKJ&PbV.KFJOCr&6',
+  },
+  {
+    text: 'SCIENCES',
+    value: 'd&WXdXWF.i1IdaNwr',
+  },
+  {
+    text: 'ASTRONOMY',
+    value: 'd&WXdXWF.i1IdaNwr.mjSF4QlF',
+  },
+  {
+    text: 'BIOLOGY',
+    value: 'd&WXdXWF.i1IdaNwr.uErN4PdS',
+  },
+  {
+    text: 'CHEMISTRY',
+    value: 'd&WXdXWF.i1IdaNwr.#r5ocgid',
+  },
+  {
+    text: 'EARTH_SCIENCE',
+    value: 'd&WXdXWF.i1IdaNwr.zbDzxDE7',
+  },
+  {
+    text: 'PHYSICS',
+    value: 'd&WXdXWF.i1IdaNwr.r#wbt#jF',
+  },
+  {
+    text: 'SOCIAL_SCIENCES',
+    value: 'd&WXdXWF.K80UMYnW',
+  },
+  {
+    text: 'ANTHROPOLOGY',
+    value: 'd&WXdXWF.K80UMYnW.ViBlbQR&',
+  },
+  {
+    text: 'CIVIC_EDUCATION',
+    value: 'd&WXdXWF.K80UMYnW.F863vKiF',
+  },
+  {
+    text: 'POLITICAL_SCIENCE',
+    value: 'd&WXdXWF.K80UMYnW.K72&pITr',
+  },
+  {
+    text: 'SOCIOLOGY',
+    value: 'd&WXdXWF.K80UMYnW.75WBu1ZS',
+  },
+  {
+    text: 'WORK',
+    value: 'l7DsPDlm',
+  },
+  {
+    text: 'PROFESSIONAL_SKILLS',
+    value: 'l7DsPDlm.#N2VymZo',
+  },
+  {
+    text: 'TECHNICAL_AND_VOCATIONAL_TRAINING',
+    value: 'l7DsPDlm.ISEXeZt&',
+  },
+  {
+    text: 'INDUSTRY_AND_SECTOR_SPECIFIC',
+    value: 'l7DsPDlm.ISEXeZt&.pRvOzJTE',
+  },
+  {
+    text: 'SKILLS_TRAINING',
+    value: 'l7DsPDlm.ISEXeZt&.&1WpYE&n',
+  },
+  {
+    text: 'TOOLS_AND_SOFTWARE_TRAINING',
+    value: 'l7DsPDlm.ISEXeZt&.1JfIbP&N',
+  },
+];
+
+describe('CategoryOptions', () => {
+  it('smoke test', () => {
+    const wrapper = shallowMount(CategoryOptions);
+    expect(wrapper.isVueInstance()).toBe(true);
+  });
+  it('emits expected data', () => {
+    const wrapper = shallowMount(CategoryOptions);
+    const value = 'string';
+    wrapper.vm.$emit('input', value);
+
+    expect(wrapper.emitted().input).toBeTruthy();
+    expect(wrapper.emitted().input.length).toBe(1);
+    expect(wrapper.emitted().input[0]).toEqual([value]);
+  });
+  const expectedFamilyTree = [
+    { text: 'SCHOOL', value: 'd&WXdXWF' },
+    { text: 'ARTS', value: 'd&WXdXWF.5QAjgfv7' },
+    { text: 'DANCE', value: 'd&WXdXWF.5QAjgfv7.BUMJJBnS' },
+  ];
+
+  describe('display', () => {
+    it('has a tooltip that displays the tree for value of an item', () => {
+      const wrapper = shallowMount(CategoryOptions);
+      const item = 'd&WXdXWF.5QAjgfv7.BUMJJBnS'; // 'Dance'
+      const expectedToolTip = 'School - Arts - Dance';
+
+      expect(wrapper.vm.tooltipHelper(item)).toEqual(expectedToolTip);
+    });
+    it(`dropdown has 'levels' key necessary to display the nested structure of categories`, () => {
+      const wrapper = shallowMount(CategoryOptions);
+      const dropdown = wrapper.vm.categoriesList;
+      const everyCategoryHasLevelsKey = dropdown.every(item => 'level' in item);
+
+      expect(everyCategoryHasLevelsKey).toBeTruthy();
+    });
+  });
+
+  describe('nested family structure', () => {
+    it('can display all the ids of family tree of an item', () => {
+      const wrapper = shallowMount(CategoryOptions);
+      const item = 'd&WXdXWF.5QAjgfv7.BUMJJBnS'; //'Dance'
+      const expectedFamilyTreeIds = expectedFamilyTree.map(item => item.value);
+
+      expect(wrapper.vm.findFamilyTreeIds(item).sort()).toEqual(expectedFamilyTreeIds.sort());
+    });
+    it('can display array of objects of family tree of an item', () => {
+      const wrapper = shallowMount(CategoryOptions);
+      const item = 'd&WXdXWF.5QAjgfv7.BUMJJBnS'; //'Dance'
+
+      expect(wrapper.vm.displayFamilyTree(testDropdown, item)).toEqual(expectedFamilyTree);
+    });
+  });
+
+  describe('interactions', () => {
+    it('when user checks an item, only that item is added to the chips', () => {
+      const wrapper = shallowMount(CategoryOptions);
+      const items = ['PbGoe2MV'];
+      const item = 'PbGoe2MV';
+      wrapper.vm.handleCheckboxItem(item, items);
+
+      expect(wrapper.vm.chipsSelected).toEqual(items);
+    });
+    it('when user checks a grandchild item, that item and all its parents are added to the dropdown', () => {
+      const wrapper = shallowMount(CategoryOptions);
+      const items = ['d&WXdXWF.e#RTW9E#.8ZoaPsVW'];
+      const item = 'd&WXdXWF.e#RTW9E#.8ZoaPsVW';
+      const expectedDropdown = ['d&WXdXWF.e#RTW9E#.8ZoaPsVW', 'd&WXdXWF.e#RTW9E#', 'd&WXdXWF'];
+      wrapper.vm.handleCheckboxItem(item, items);
+
+      expect(wrapper.vm.dropdownSelected.length).toEqual(expectedDropdown.length);
+    });
+    it('when user unchecks a grandchild item that has a sibling, only that item is removed from the chips', () => {
+      const wrapper = shallowMount(CategoryOptions, {
+        data() {
+          return {
+            chipsSelected: [
+              'd&WXdXWF.e#RTW9E#.8ZoaPsVW',
+              'd&WXdXWF.e#RTW9E#.CfnlTDZ#',
+              'd&WXdXWF.5QAjgfv7.BUMJJBnS',
+              'd&WXdXWF.5QAjgfv7.XsWznP4o',
+            ],
+          };
+        },
+      });
+      const items = [
+        'd&WXdXWF.e#RTW9E#.8ZoaPsVW',
+        'd&WXdXWF.e#RTW9E#.CfnlTDZ#',
+        'd&WXdXWF.5QAjgfv7.BUMJJBnS',
+      ];
+      const item = 'd&WXdXWF.5QAjgfv7.BUMJJBnS';
+      const expectedChips = [
+        'd&WXdXWF.e#RTW9E#.8ZoaPsVW',
+        'd&WXdXWF.e#RTW9E#.CfnlTDZ#',
+        'd&WXdXWF.5QAjgfv7.BUMJJBnS',
+      ];
+      const expectedDropdown = [
+        'd&WXdXWF.e#RTW9E#.8ZoaPsVW',
+        'd&WXdXWF.e#RTW9E#',
+        'd&WXdXWF',
+        'd&WXdXWF.e#RTW9E#.CfnlTDZ#',
+        'd&WXdXWF.5QAjgfv7.BUMJJBnS',
+        'd&WXdXWF.5QAjgfv7',
+      ];
+      wrapper.vm.handleCheckboxItem(item, items);
+
+      expect(wrapper.vm.chipsSelected.length).toEqual(expectedChips.length);
+      expect(wrapper.vm.dropdownSelected.length).toEqual(expectedDropdown.length);
+    });
+    it('when user unchecks a grandchild item that has no siblings and its parents have siblings, that item and its parent are removed from the chips ', () => {
+      const wrapper = shallowMount(CategoryOptions, {
+        data() {
+          return {
+            chipsSelected: [
+              'd&WXdXWF.e#RTW9E#.8ZoaPsVW',
+              'd&WXdXWF.e#RTW9E#.CfnlTDZ#',
+              'd&WXdXWF.5QAjgfv7.BUMJJBnS',
+            ],
+          };
+        },
+      });
+      const items = ['d&WXdXWF.e#RTW9E#.8ZoaPsVW', 'd&WXdXWF.e#RTW9E#.CfnlTDZ#'];
+      const item = 'd&WXdXWF.e#RTW9E#.CfnlTDZ#';
+      const expectedChips = ['d&WXdXWF.e#RTW9E#.8ZoaPsVW', 'd&WXdXWF.e#RTW9E#.CfnlTDZ#'];
+      const expectedDropdown = [
+        'd&WXdXWF.e#RTW9E#.8ZoaPsVW',
+        'd&WXdXWF.e#RTW9E#',
+        'd&WXdXWF',
+        'd&WXdXWF.e#RTW9E#.CfnlTDZ#',
+      ];
+      wrapper.vm.handleCheckboxItem(item, items);
+
+      expect(wrapper.vm.chipsSelected.length).toEqual(expectedChips.length);
+      expect(wrapper.vm.dropdownSelected.length).toEqual(expectedDropdown.length);
+    });
+    it('when user unchecks a grandchild item that has no siblings and its parents have no siblings, that item, its parent, and the root are removed from the chips ', () => {
+      const wrapper = shallowMount(CategoryOptions, {
+        data() {
+          return { chipsSelected: ['d&WXdXWF.e#RTW9E#.8ZoaPsVW', 'BCG3&slG.wZ3EAedB'] };
+        },
+      });
+      const items = ['BCG3&slG.wZ3EAedB'];
+      const item = 'BCG3&slG.wZ3EAedB';
+      const expectedChips = ['BCG3&slG.wZ3EAedB'];
+      const expectedDropdown = ['BCG3&slG.wZ3EAedB', 'BCG3&slG'];
+      wrapper.vm.handleCheckboxItem(item, items);
+
+      expect(wrapper.vm.chipsSelected.length).toEqual(expectedChips.length);
+      expect(wrapper.vm.dropdownSelected.length).toEqual(expectedDropdown.length);
+    });
+    it('when user unchecks an item that has children and its parents have no siblings, that item and all its children are removed from the chips ', () => {
+      const wrapper = shallowMount(CategoryOptions, {
+        data() {
+          return { chipsSelected: ['d&WXdXWF.5QAjgfv7.BUMJJBnS'] };
+        },
+      });
+      const items = ['d&WXdXWF.5QAjgfv7.BUMJJBnS', 'd&WXdXWF'];
+      const item = 'd&WXdXWF';
+      const expectedChips = [];
+      const expectedDropdown = [];
+      wrapper.vm.handleCheckboxItem(item, items);
+
+      expect(wrapper.vm.chipsSelected.length).toEqual(expectedChips.length);
+      expect(wrapper.vm.dropdownSelected.length).toEqual(expectedDropdown.length);
+    });
+    it('when user checks grandchild of parent after parent item has already been checked, the grandchild replaces the parent chip', () => {
+      const wrapper = shallowMount(CategoryOptions, {
+        data() {
+          return { chipsSelected: ['d&WXdXWF'] };
+        },
+      });
+      const items = ['d&WXdXWF', 'd&WXdXWF.5QAjgfv7.XsWznP4o'];
+      const item = 'd&WXdXWF.5QAjgfv7.XsWznP4o';
+      const expectedChips = ['d&WXdXWF.5QAjgfv7.XsWznP4o'];
+      const expectedDropdown = ['d&WXdXWF.5QAjgfv7.XsWznP4o', 'd&WXdXWF.5QAjgfv7', 'd&WXdXWF'];
+      wrapper.vm.handleCheckboxItem(item, items);
+
+      expect(wrapper.vm.chipsSelected.length).toEqual(expectedChips.length);
+      expect(wrapper.vm.dropdownSelected.length).toEqual(expectedDropdown.length);
+    });
+  });
+
+  describe('close button on chip interactions', () => {
+    it('in the autocomplete bar, the chip is removed when user clicks on its close button', () => {
+      const wrapper = shallowMount(CategoryOptions, {
+        data() {
+          return { chipsSelected: ['remove me', 'abc', 'def', 'abc.'] };
+        },
+      });
+      const originalChipsLength = wrapper.vm.chipsSelected.length;
+      wrapper.vm.remove('remove me');
+      const chips = wrapper.vm.chipsSelected;
+
+      expect(chips.length).toEqual(originalChipsLength - 1);
+    });
+  });
+});

From d38b00942e173a97acb4c5d20b8aa803ff38e276 Mon Sep 17 00:00:00 2001
From: Richard Tibbles <richard@learningequality.org>
Date: Fri, 29 Apr 2022 10:13:43 -0700
Subject: [PATCH 5/9] Simplify adding/removing logic.

---
 .../components/edit/CategoryOptions.vue       | 92 +++++--------------
 1 file changed, 22 insertions(+), 70 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/CategoryOptions.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/CategoryOptions.vue
index a3b00df88d..e8badadb27 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/CategoryOptions.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/CategoryOptions.vue
@@ -2,7 +2,7 @@
 
   <div id="app">
     <VAutocomplete
-      v-model="selected"
+      :value="selected"
       :items="categoriesList"
       :searchInput.sync="categoryText"
       :label="translateMetadataString('category')"
@@ -13,6 +13,7 @@
       multiple
       item-value="value"
       item-text="text"
+      @click:clear="item => remove(item.value)"
     >
       <template v-slot:selection="data">
         <VTooltip bottom>
@@ -41,13 +42,13 @@
         <div style="width: 100%; height: 100%" aria-hidden="true">
           <VDivider v-if="!item.value.includes('.')" />
           <KCheckbox
-            v-model="selected"
-            :checked="dropdownSelected.includes(item.value)"
+            :checked="dropdownSelected[item.value]"
             :label="item.text"
             :value="item.value"
             style="margin-top: 10px"
             :style="treeItemStyle(item)"
             :ripple="false"
+            @change="checked => checked ? add(item.value) : remove(item.value)"
           />
         </div>
       </template>
@@ -128,8 +129,6 @@
     data() {
       return {
         categoryText: null,
-        chipsSelected: [],
-        nested: true,
       };
     },
     computed: {
@@ -143,46 +142,39 @@
         });
       },
       dropdownSelected() {
-        return [
-          ...new Set(
-            this.chipsSelected.reduce((a, chip) => a.concat(this.findFamilyTreeIds(chip)), [])
-          ),
-        ];
+        const obj = {};
+        for (let category of this.selected) {
+          const paths = category.split('.');
+          let cat = '';
+          for (let path of paths) {
+            cat += path;
+            obj[cat] = true;
+            cat += '.';
+          }
+        }
+        return obj;
       },
       selected: {
         get() {
           return this.value;
         },
         set(value) {
-          let items = [...value];
-          let currentItem = items[items.length - 1] || '';
-
-          this.handleCheckboxItem(currentItem, items);
-          this.$emit('input', this.chipsSelected);
+          this.$emit('input', value);
         },
       },
-      dropdownSelectedObj() {
-        return this.dropdownSelected.map(item => {
-          return {
-            text: this.translateMetadataString(camelCase(CategoriesLookup[item])),
-            value: item,
-            level: this.findDepth(item),
-          };
-        });
-      },
-    },
-    watch: {
-      categoryText(val) {
-        return !val ? (this.nested = true) : (this.nested = false);
+      nested() {
+        return !this.categoryText;
       },
     },
     methods: {
       treeItemStyle(item) {
         return this.nested ? { paddingLeft: `${item.level * 24}px` } : {};
       },
+      add(item) {
+        this.selected = [...this.selected, item];
+      },
       remove(item) {
-        this.chipsSelected.splice(this.chipsSelected.indexOf(item), 1);
-        this.$emit('input', this.chipsSelected);
+        this.selected = this.selected.filter(i => !i.startsWith(item));
       },
       tooltipHelper(id) {
         return this.displayFamilyTree(dropdown, id)
@@ -206,46 +198,6 @@
         }
         return family;
       },
-      handleCheckboxItem(item, items) {
-        const parents = this.findFamilyTreeIds(item).filter(familyMember => familyMember !== item);
-        const rootParent = parents[0];
-        const directParent = item.substring(0, item.lastIndexOf('.')) || null;
-        const potentialSiblings = this.dropdownSelectedObj.filter(
-          checkedItem => checkedItem.level === this.findDepth(item) && checkedItem.value !== item
-        );
-        const numberOfSiblings = potentialSiblings.filter(sibling =>
-          sibling.value.includes(directParent)
-        ).length;
-
-        // If removing a checked item that is listed as a chip in the autocomplete bar
-        if (this.chipsSelected.length > items.length) {
-          this.chipsSelected = items;
-        } else {
-          // Behaviors for items not listed as chips in the autocomplete bar
-          if (this.dropdownSelected.includes(item)) {
-            if (rootParent) {
-              // If checked item has a sibling
-              if (numberOfSiblings > 0) {
-                this.chipsSelected = this.chipsSelected.filter(
-                  chip => !chip.includes(item) && chip !== rootParent
-                );
-              } else {
-                this.chipsSelected = [
-                  ...this.chipsSelected.filter(chip => !chip.includes(item)),
-                  rootParent,
-                ];
-              }
-            } else {
-              this.chipsSelected = [...this.chipsSelected.filter(chip => !chip.includes(item))];
-            }
-          } else {
-            // If selecting a child item when parent has already been checked
-            if (items.filter(val => parents.indexOf(val) !== -1)) {
-              this.chipsSelected = items.filter(val => parents.indexOf(val) === -1);
-            }
-          }
-        }
-      },
     },
     $trs: {
       noCategoryFoundText: 'Category not found',

From eb6ca53df313a8bbdf244dee4fa23b0a8cc07247 Mon Sep 17 00:00:00 2001
From: sairina <sairina.merinotsui@gmail.com>
Date: Mon, 9 May 2022 14:57:11 -0700
Subject: [PATCH 6/9] Add docstring to clarify function

---
 .../channelEdit/components/edit/CategoryOptions.vue       | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/CategoryOptions.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/CategoryOptions.vue
index e8badadb27..f77e0e7170 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/CategoryOptions.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/CategoryOptions.vue
@@ -187,9 +187,13 @@
       displayFamilyTree(nodes, id) {
         return nodes.filter(node => this.findFamilyTreeIds(id).includes(node.value));
       },
-      findFamilyTreeIds(value) {
+      /**
+       * @param {String} id The id of the selected category
+       * @returns {Array} An array of all ids of the family beginning with the selected category
+       */
+      findFamilyTreeIds(id) {
         const family = [];
-        let familyMember = value;
+        let familyMember = id;
         while (familyMember) {
           family.push(familyMember);
           familyMember = familyMember.includes('.')

From f211fb18bdec7021ca012087e828592ff85f2dff Mon Sep 17 00:00:00 2001
From: sairina <sairina.merinotsui@gmail.com>
Date: Mon, 9 May 2022 15:45:21 -0700
Subject: [PATCH 7/9] Add method to clear both dropdown menu and autocomplete
 when x is clicked

---
 .../frontend/channelEdit/components/edit/CategoryOptions.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/CategoryOptions.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/CategoryOptions.vue
index f77e0e7170..29eed00850 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/CategoryOptions.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/CategoryOptions.vue
@@ -13,7 +13,7 @@
       multiple
       item-value="value"
       item-text="text"
-      @click:clear="item => remove(item.value)"
+      @click:clear="$nextTick(() => removeAll())"
     >
       <template v-slot:selection="data">
         <VTooltip bottom>
@@ -176,6 +176,9 @@
       remove(item) {
         this.selected = this.selected.filter(i => !i.startsWith(item));
       },
+      removeAll() {
+        this.selected = [];
+      },
       tooltipHelper(id) {
         return this.displayFamilyTree(dropdown, id)
           .map(node => this.translateMetadataString(camelCase(node.text)))

From 08150c2c03e65a271b9ceab059c378f5dd9755b9 Mon Sep 17 00:00:00 2001
From: sairina <sairina.merinotsui@gmail.com>
Date: Mon, 9 May 2022 16:35:57 -0700
Subject: [PATCH 8/9] Update tests

---
 .../edit/__tests__/categoryOptions.spec.js    | 137 ++----------------
 1 file changed, 15 insertions(+), 122 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/__tests__/categoryOptions.spec.js b/contentcuration/contentcuration/frontend/channelEdit/components/edit/__tests__/categoryOptions.spec.js
index a63c9a0d85..c8a82a30e8 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/__tests__/categoryOptions.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/__tests__/categoryOptions.spec.js
@@ -294,130 +294,23 @@ describe('CategoryOptions', () => {
   });
 
   describe('interactions', () => {
-    it('when user checks an item, only that item is added to the chips', () => {
+    it('when user checks an item, that is emitted to the parent component', () => {
       const wrapper = shallowMount(CategoryOptions);
-      const items = ['PbGoe2MV'];
-      const item = 'PbGoe2MV';
-      wrapper.vm.handleCheckboxItem(item, items);
+      const item = 'abcd';
+      wrapper.vm.$emit = jest.fn();
+      wrapper.vm.add(item);
 
-      expect(wrapper.vm.chipsSelected).toEqual(items);
+      expect(wrapper.vm.$emit.mock.calls[0][0]).toBe('input');
+      expect(wrapper.vm.$emit.mock.calls[0][1]).toEqual([item]);
     });
-    it('when user checks a grandchild item, that item and all its parents are added to the dropdown', () => {
+    it('when user unchecks an item, that is emitted to the parent component', () => {
       const wrapper = shallowMount(CategoryOptions);
-      const items = ['d&WXdXWF.e#RTW9E#.8ZoaPsVW'];
-      const item = 'd&WXdXWF.e#RTW9E#.8ZoaPsVW';
-      const expectedDropdown = ['d&WXdXWF.e#RTW9E#.8ZoaPsVW', 'd&WXdXWF.e#RTW9E#', 'd&WXdXWF'];
-      wrapper.vm.handleCheckboxItem(item, items);
+      const item = 'defj';
+      wrapper.vm.$emit = jest.fn();
+      wrapper.vm.remove(item);
 
-      expect(wrapper.vm.dropdownSelected.length).toEqual(expectedDropdown.length);
-    });
-    it('when user unchecks a grandchild item that has a sibling, only that item is removed from the chips', () => {
-      const wrapper = shallowMount(CategoryOptions, {
-        data() {
-          return {
-            chipsSelected: [
-              'd&WXdXWF.e#RTW9E#.8ZoaPsVW',
-              'd&WXdXWF.e#RTW9E#.CfnlTDZ#',
-              'd&WXdXWF.5QAjgfv7.BUMJJBnS',
-              'd&WXdXWF.5QAjgfv7.XsWznP4o',
-            ],
-          };
-        },
-      });
-      const items = [
-        'd&WXdXWF.e#RTW9E#.8ZoaPsVW',
-        'd&WXdXWF.e#RTW9E#.CfnlTDZ#',
-        'd&WXdXWF.5QAjgfv7.BUMJJBnS',
-      ];
-      const item = 'd&WXdXWF.5QAjgfv7.BUMJJBnS';
-      const expectedChips = [
-        'd&WXdXWF.e#RTW9E#.8ZoaPsVW',
-        'd&WXdXWF.e#RTW9E#.CfnlTDZ#',
-        'd&WXdXWF.5QAjgfv7.BUMJJBnS',
-      ];
-      const expectedDropdown = [
-        'd&WXdXWF.e#RTW9E#.8ZoaPsVW',
-        'd&WXdXWF.e#RTW9E#',
-        'd&WXdXWF',
-        'd&WXdXWF.e#RTW9E#.CfnlTDZ#',
-        'd&WXdXWF.5QAjgfv7.BUMJJBnS',
-        'd&WXdXWF.5QAjgfv7',
-      ];
-      wrapper.vm.handleCheckboxItem(item, items);
-
-      expect(wrapper.vm.chipsSelected.length).toEqual(expectedChips.length);
-      expect(wrapper.vm.dropdownSelected.length).toEqual(expectedDropdown.length);
-    });
-    it('when user unchecks a grandchild item that has no siblings and its parents have siblings, that item and its parent are removed from the chips ', () => {
-      const wrapper = shallowMount(CategoryOptions, {
-        data() {
-          return {
-            chipsSelected: [
-              'd&WXdXWF.e#RTW9E#.8ZoaPsVW',
-              'd&WXdXWF.e#RTW9E#.CfnlTDZ#',
-              'd&WXdXWF.5QAjgfv7.BUMJJBnS',
-            ],
-          };
-        },
-      });
-      const items = ['d&WXdXWF.e#RTW9E#.8ZoaPsVW', 'd&WXdXWF.e#RTW9E#.CfnlTDZ#'];
-      const item = 'd&WXdXWF.e#RTW9E#.CfnlTDZ#';
-      const expectedChips = ['d&WXdXWF.e#RTW9E#.8ZoaPsVW', 'd&WXdXWF.e#RTW9E#.CfnlTDZ#'];
-      const expectedDropdown = [
-        'd&WXdXWF.e#RTW9E#.8ZoaPsVW',
-        'd&WXdXWF.e#RTW9E#',
-        'd&WXdXWF',
-        'd&WXdXWF.e#RTW9E#.CfnlTDZ#',
-      ];
-      wrapper.vm.handleCheckboxItem(item, items);
-
-      expect(wrapper.vm.chipsSelected.length).toEqual(expectedChips.length);
-      expect(wrapper.vm.dropdownSelected.length).toEqual(expectedDropdown.length);
-    });
-    it('when user unchecks a grandchild item that has no siblings and its parents have no siblings, that item, its parent, and the root are removed from the chips ', () => {
-      const wrapper = shallowMount(CategoryOptions, {
-        data() {
-          return { chipsSelected: ['d&WXdXWF.e#RTW9E#.8ZoaPsVW', 'BCG3&slG.wZ3EAedB'] };
-        },
-      });
-      const items = ['BCG3&slG.wZ3EAedB'];
-      const item = 'BCG3&slG.wZ3EAedB';
-      const expectedChips = ['BCG3&slG.wZ3EAedB'];
-      const expectedDropdown = ['BCG3&slG.wZ3EAedB', 'BCG3&slG'];
-      wrapper.vm.handleCheckboxItem(item, items);
-
-      expect(wrapper.vm.chipsSelected.length).toEqual(expectedChips.length);
-      expect(wrapper.vm.dropdownSelected.length).toEqual(expectedDropdown.length);
-    });
-    it('when user unchecks an item that has children and its parents have no siblings, that item and all its children are removed from the chips ', () => {
-      const wrapper = shallowMount(CategoryOptions, {
-        data() {
-          return { chipsSelected: ['d&WXdXWF.5QAjgfv7.BUMJJBnS'] };
-        },
-      });
-      const items = ['d&WXdXWF.5QAjgfv7.BUMJJBnS', 'd&WXdXWF'];
-      const item = 'd&WXdXWF';
-      const expectedChips = [];
-      const expectedDropdown = [];
-      wrapper.vm.handleCheckboxItem(item, items);
-
-      expect(wrapper.vm.chipsSelected.length).toEqual(expectedChips.length);
-      expect(wrapper.vm.dropdownSelected.length).toEqual(expectedDropdown.length);
-    });
-    it('when user checks grandchild of parent after parent item has already been checked, the grandchild replaces the parent chip', () => {
-      const wrapper = shallowMount(CategoryOptions, {
-        data() {
-          return { chipsSelected: ['d&WXdXWF'] };
-        },
-      });
-      const items = ['d&WXdXWF', 'd&WXdXWF.5QAjgfv7.XsWznP4o'];
-      const item = 'd&WXdXWF.5QAjgfv7.XsWznP4o';
-      const expectedChips = ['d&WXdXWF.5QAjgfv7.XsWznP4o'];
-      const expectedDropdown = ['d&WXdXWF.5QAjgfv7.XsWznP4o', 'd&WXdXWF.5QAjgfv7', 'd&WXdXWF'];
-      wrapper.vm.handleCheckboxItem(item, items);
-
-      expect(wrapper.vm.chipsSelected.length).toEqual(expectedChips.length);
-      expect(wrapper.vm.dropdownSelected.length).toEqual(expectedDropdown.length);
+      expect(wrapper.vm.$emit.mock.calls[0][0]).toBe('input');
+      expect(wrapper.vm.$emit.mock.calls[0][1]).toEqual([]);
     });
   });
 
@@ -425,12 +318,12 @@ describe('CategoryOptions', () => {
     it('in the autocomplete bar, the chip is removed when user clicks on its close button', () => {
       const wrapper = shallowMount(CategoryOptions, {
         data() {
-          return { chipsSelected: ['remove me', 'abc', 'def', 'abc.'] };
+          return { selected: ['remove me', 'abc', 'def', 'abc.'] };
         },
       });
-      const originalChipsLength = wrapper.vm.chipsSelected.length;
+      const originalChipsLength = wrapper.vm.selected.length;
       wrapper.vm.remove('remove me');
-      const chips = wrapper.vm.chipsSelected;
+      const chips = wrapper.vm.selected;
 
       expect(chips.length).toEqual(originalChipsLength - 1);
     });

From af26bb7e13950d6ee9a7e8c61249079c0f2e25e7 Mon Sep 17 00:00:00 2001
From: sairina <sairina.merinotsui@gmail.com>
Date: Mon, 9 May 2022 20:31:22 -0700
Subject: [PATCH 9/9] Fix console warning for attach prop in dropdowns

---
 .../frontend/channelEdit/components/edit/DetailsTabView.vue | 6 ++++++
 .../channelEdit/components/edit/LearningActivityOptions.vue | 2 +-
 .../frontend/channelEdit/components/edit/LevelsOptions.vue  | 2 +-
 .../channelEdit/components/edit/ResourcesNeededOptions.vue  | 2 +-
 .../frontend/shared/views/LanguageDropdown.vue              | 2 +-
 .../frontend/shared/views/LicenseDropdown.vue               | 2 +-
 .../frontend/shared/views/VisibilityDropdown.vue            | 2 +-
 7 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
index f8f14c6f19..3fd74720d6 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
@@ -61,18 +61,21 @@
             >
               <!-- Learning activity -->
               <LearningActivityOptions
+                id="learning_activities"
                 ref="learning_activities"
                 v-model="contentLearningActivities"
                 @focus="trackClick('Learning activities')"
               />
               <!-- Level -->
               <LevelsOptions
+                id="levels"
                 ref="contentLevel"
                 v-model="contentLevel"
                 @focus="trackClick('Levels dropdown')"
               />
               <!-- What you will need -->
               <ResourcesNeededOptions
+                id="resources_needed"
                 ref="resourcesNeeded"
                 v-model="resourcesNeeded"
                 @focus="trackClick('What you will need')"
@@ -178,6 +181,7 @@
           </h1>
           <!-- Language -->
           <LanguageDropdown
+            id="language"
             ref="language"
             v-model="language"
             class="mb-2"
@@ -191,6 +195,7 @@
           <!-- Visibility -->
           <VisibilityDropdown
             v-if="allResources"
+            id="role_visibility"
             ref="role_visibility"
             v-model="role"
             :placeholder="getPlaceholder('role')"
@@ -301,6 +306,7 @@
 
             <!-- License -->
             <LicenseDropdown
+              id="license"
               ref="license"
               v-model="licenseItem"
               :required="isUnique(license) && isUnique(license_description) && !disableAuthEdits"
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/LearningActivityOptions.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/LearningActivityOptions.vue
index 1d8064151b..001092af40 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/LearningActivityOptions.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/LearningActivityOptions.vue
@@ -10,7 +10,7 @@
     multiple
     deletableChips
     :rules="learningActivityRules"
-    attach="learning_activities"
+    attach="#learning_activities"
   />
 
 </template>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/LevelsOptions.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/LevelsOptions.vue
index b163594b8f..bbf7de9a59 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/LevelsOptions.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/LevelsOptions.vue
@@ -10,7 +10,7 @@
     :label="translateMetadataString('level')"
     multiple
     deletableChips
-    attach="contentLevel"
+    attach="#levels"
   />
 
 </template>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/ResourcesNeededOptions.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/ResourcesNeededOptions.vue
index 6bb215f6d4..e6900d8d31 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/ResourcesNeededOptions.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/ResourcesNeededOptions.vue
@@ -10,7 +10,7 @@
     multiple
     deletableChips
     clearable
-    attach="resourcesNeeded"
+    attach="#resources_needed"
   />
 
 </template>
diff --git a/contentcuration/contentcuration/frontend/shared/views/LanguageDropdown.vue b/contentcuration/contentcuration/frontend/shared/views/LanguageDropdown.vue
index d5ab775ce2..acad74d47f 100644
--- a/contentcuration/contentcuration/frontend/shared/views/LanguageDropdown.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/LanguageDropdown.vue
@@ -20,7 +20,7 @@
     :menu-props="menuProps"
     :multiple="multiple"
     :chips="multiple"
-    attach="language"
+    attach="#language"
     @change="input = ''"
     @focus="$emit('focus')"
   >
diff --git a/contentcuration/contentcuration/frontend/shared/views/LicenseDropdown.vue b/contentcuration/contentcuration/frontend/shared/views/LicenseDropdown.vue
index d0d5b6d051..fe7da89f98 100644
--- a/contentcuration/contentcuration/frontend/shared/views/LicenseDropdown.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/LicenseDropdown.vue
@@ -18,7 +18,7 @@
         menu-props="offsetY"
         class="ma-0"
         box
-        attach="license"
+        attach="#license"
         @focus="$emit('focus')"
       >
         <template #append-outer>
diff --git a/contentcuration/contentcuration/frontend/shared/views/VisibilityDropdown.vue b/contentcuration/contentcuration/frontend/shared/views/VisibilityDropdown.vue
index 5b6da20684..10ae19a7e5 100644
--- a/contentcuration/contentcuration/frontend/shared/views/VisibilityDropdown.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/VisibilityDropdown.vue
@@ -14,7 +14,7 @@
       :rules="rules"
       menu-props="offsetY"
       box
-      attach="role_visibility"
+      attach="#role_visibility"
       @focus="$emit('focus')"
     >
       <template v-slot:append-outer>