From 0ff5fc41437f740addb3a8f5996605374b2158ad Mon Sep 17 00:00:00 2001
From: Desi Borisova <158429017+DesiBorisova@users.noreply.github.com>
Date: Fri, 23 Aug 2024 10:59:02 +0300
Subject: [PATCH] GDB-10680 - fix the scroll on the class hierarchy slider
 (#1517)

---
 .../rdf-class-hierarchy.controller.js         | 61 +++++++++----------
 src/pages/rdfClassHierarchyInfo.html          |  3 +-
 2 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/src/js/angular/graphexplore/controllers/rdf-class-hierarchy.controller.js b/src/js/angular/graphexplore/controllers/rdf-class-hierarchy.controller.js
index 5d33c9857..2f8896a4e 100644
--- a/src/js/angular/graphexplore/controllers/rdf-class-hierarchy.controller.js
+++ b/src/js/angular/graphexplore/controllers/rdf-class-hierarchy.controller.js
@@ -222,43 +222,42 @@ function RdfClassHierarchyCtlr($scope, $rootScope, $location, $repositories, $li
 
         $timeout(function () {
             $scope.$broadcast('reCalcViewDimensions');
-        }, 200);
 
-        // set this before the slider is moved by the user as we need it
-        setNewCurrentSliderValue();
+            const sliderElement = document.getElementById('rzslider');
+            let lastTimeWheel = 0;
 
-        // Modify the slider with the mouse wheel
-        let lastTimeWheel = 0;
-        $('rzslider').on('wheel', function (e) {
-            e.preventDefault();
-            e.stopPropagation();
+            sliderElement.addEventListener('wheel', function (e) {
+                e.preventDefault();
+                e.stopPropagation();
 
-            // at least 100ms must have passed since last time we updated
-            const now = new Date().getTime();
-            if (now - lastTimeWheel > 100) {
-                lastTimeWheel = now;
-            } else {
-                return;
-            }
+                // at least 100ms must have passed since last time we updated
+                const now = new Date().getTime();
+                if (now - lastTimeWheel > 100) {
+                    lastTimeWheel = now;
+                } else {
+                    return;
+                }
 
-            e = e.originalEvent;
+                let newValue = $scope.classCountSlider.value;
+                const stepSize = $scope.classCountSlider.options.step || 1;
+                if (e.deltaY <= -1) {
+                    newValue += stepSize;
+                } else if (e.deltaY >= 1) {
+                    newValue -= stepSize;
+                }
 
-            let newValue = $scope.classCountSlider.value;
-            if (e.deltaY <= -1) {
-                newValue += 1;
-            } else if (e.deltaY >= 1) {
-                newValue -= 1;
-            }
+                newValue = Math.max($scope.classCountSlider.options.floor, Math.min($scope.classCountSlider.options.ceil, newValue));
 
-            if (newValue !== $scope.classCountSlider.value
-                && newValue >= $scope.classCountSlider.options.floor
-                && newValue <= $scope.classCountSlider.options.ceil) {
-                $scope.$apply(function () {
-                    $scope.classCountSlider.value = newValue;
-                    $timeout(setNewCurrentSliderValue, 100, true);
-                });
-            }
-        });
+                if (newValue !== $scope.classCountSlider.value) {
+                    $scope.$apply(function () {
+                        $scope.classCountSlider.value = newValue;
+                        $timeout(setNewCurrentSliderValue, 100, true);
+                    });
+                }
+            });
+        }, 200);
+
+        setNewCurrentSliderValue();
     }
 
     function setNewCurrentSliderValue() {
diff --git a/src/pages/rdfClassHierarchyInfo.html b/src/pages/rdfClassHierarchyInfo.html
index e34926a55..bac3bff0f 100644
--- a/src/pages/rdfClassHierarchyInfo.html
+++ b/src/pages/rdfClassHierarchyInfo.html
@@ -102,7 +102,8 @@ <h1>
 				<span class="icon-info text-tertiary"></span>
 			</span>
 		</p>
-        <rzslider rz-slider-model="classCountSlider.value"
+        <rzslider id="rzslider"
+                  rz-slider-model="classCountSlider.value"
                   rz-slider-options="classCountSlider.options"
                   ng-hide="isSystemRepository()"></rzslider>
     </div>