ConceptTree: Fix performance issues and add small adjustments

This commit fixes performance issues when there are lots of items in ConceptTree. As a consequence, items in ConceptTree won't get highlighted if there are hovered elsewhere in the application. That feature alone caused all of the performance issues we had.

src/components/ConceptTreeItem.vue

@@ -34,7 +34,8 @@
         @click.stop.prevent="onClick" >
         <item-name
           :item="concept"
-          :is-highlighted="isSelected" />
+          :is-highlighted="isSelected"
+          :prevent-external-hover="true" />
       </a>
       <div
         v-b-tooltip.hover="{ title: 'add to mapping', delay: $util.delay.medium}"
@@ -99,6 +100,7 @@ export default {
   },
   data () {
     return {
+      isHoveredFromHere: false,
       /** Determines whether to show loading indicator for narrower */
       loadingChildren: false,
       /** Prevent double clicks */
@@ -111,7 +113,8 @@ export default {
       return  _.get(this.concept, "narrower.length", 1) != 0
     },
     isHovered() {
-      return this.$jskos.compare(this.hoveredConcept, this.concept)
+      // return this.$jskos.compare(this.hoveredConcept, this.concept)
+      return this.isHoveredFromHere
     },
     isSelected() {
       return this.$jskos.compare(this.selected.concept[this.isLeft], this.concept)
@@ -126,6 +129,7 @@ export default {
      */
     hovering(concept) {
       this.hoveredConcept = concept
+      this.isHoveredFromHere = concept != null
     },
     /**
      * Calls open and prevents accidental double clicks.

src/components/ItemName.vue

@@ -94,6 +94,14 @@ export default {
     isHighlighted: {
       type: Boolean,
       default: false
+    },
+    /**
+     * If true, this ItemName will not be hovered if the same concept is hovered elsewhere.
+     * Use this option if ItemName is used in large quantities, otherwise there will be a substantial performance penalty.
+     */
+    preventExternalHover: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -106,7 +114,7 @@ export default {
   },
   computed: {
     isHovered() {
-      return this.$jskos.compare(this.hoveredConcept, this.item)
+      return this.isHoveredFromHere || (!this.preventExternalHover && this.$jskos.compare(this.hoveredConcept, this.item))
     },
     notation() {
       return this.$util.notation(this.item)

src/style/colors.less

@@ -64,7 +64,7 @@
 @color--itemName-highlighted-background: @color-highlight;
 
 @color--conceptTreeItem-addToMapping: @color-background;
-@color--conceptTreeItem-addToMapping-hover: @color-highlight;
+@color--conceptTreeItem-addToMapping-hover: @color-highlight-light;
 @color--conceptTreeItem-item-hover: @color-primary-4;
 @color--conceptTreeItem-item-hover-background: @color-highlight;