Merge branch 'tech/perf-hover-sequence-list' into 'develop'

Tech/perf hover sequence list

See merge request geovisio/website!110

src/views/MySequencesView.vue

@@ -72,10 +72,7 @@
         <li
           v-if="userSequences.length"
           v-for="item in userSequences"
-          :class="[
-            'sequence-item',
-            item.id === seqId ? 'button-item-hover' : ''
-          ]"
+          class="sequence-item"
           @mouseover="goToSequence(item)"
         >
           <router-link
@@ -313,15 +310,20 @@ function bboxIsInsideOther(mainBbox: number[], bboxInside: number[]): boolean {
   )
 }
 function goToSequence(sequence: SequenceLinkInterface): void {
-  seqId.value = sequence.id
-  viewerRef.value.viewer.select(seqId.value)
   const currentBbox = [
     viewerRef.value.viewer._map.getBounds()._ne.lng,
     viewerRef.value.viewer._map.getBounds()._ne.lat,
     viewerRef.value.viewer._map.getBounds()._sw.lng,
     viewerRef.value.viewer._map.getBounds()._sw.lat
   ]
-  if (bboxIsInsideOther(currentBbox, sequence.extent.spatial.bbox[0])) return
+  if (
+    seqId.value === sequence.id &&
+    bboxIsInsideOther(currentBbox, sequence.extent.spatial.bbox[0])
+  ) {
+    return
+  }
+  seqId.value = sequence.id
+  viewerRef.value.viewer.select(seqId.value)
   viewerRef.value.viewer._map.flyTo({
     center: [
       sequence.extent.spatial.bbox[0][0],
@@ -386,6 +388,7 @@ watchEffect(() => {
     viewerRef.value.viewer.addEventListener(
       'hover',
       (e: { detail: { seqId: string } }) => {
+        if (seqId.value === e.detail.seqId) return
         seqId.value = e.detail.seqId
         scrollIntoSelected(e.detail.seqId, userSequences.value)
         viewerRef.value.viewer.select(e.detail.seqId)
@@ -454,6 +457,16 @@ watchEffect(() => {
   &:nth-child(2n) {
     background-color: var(--white);
   }
+  &:hover {
+    background-color: var(--blue);
+    color: var(--white);
+    .button-item {
+      & > *,
+      & > :nth-child(2) {
+        color: var(--white);
+      }
+    }
+  }
 }
 .wrapper-button {
   position: absolute;
@@ -468,18 +481,6 @@ watchEffect(() => {
     margin-bottom: toRem(1);
   }
 }
-.button-item-hover {
-  background-color: var(--blue);
-  &:nth-child(2n) {
-    background-color: var(--blue);
-  }
-  .button-item {
-    & > *,
-    & > :nth-child(2) {
-      color: var(--white);
-    }
-  }
-}
 .item-head-fixed {
   position: fixed;
   top: toRem(8);