From 3b6822e7b64fac78cde0d26ac4e0e21410a15776 Mon Sep 17 00:00:00 2001
From: Braden Morley <63816946+bradenjmorley@users.noreply.github.com>
Date: Wed, 22 Mar 2023 01:36:53 +0000
Subject: [PATCH] fix(ui): autoscroll to new measurement on measurement table
 (#3223)

Fixed scrolling for measurement clicks

changed import
---
 extensions/measurement-tracking/package.json           |  1 +
 .../src/panels/PanelMeasurementTableTracking/index.tsx | 10 +++++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/extensions/measurement-tracking/package.json b/extensions/measurement-tracking/package.json
index 0facf190a..4f57ab622 100644
--- a/extensions/measurement-tracking/package.json
+++ b/extensions/measurement-tracking/package.json
@@ -36,6 +36,7 @@
     "@cornerstonejs/tools": "^0.50.2",
     "@ohif/extension-cornerstone-dicom-sr": "^3.0.0",
     "dcmjs": "^0.29.4",
+    "lodash.debounce": "^4.17.21",
     "prop-types": "^15.6.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
diff --git a/extensions/measurement-tracking/src/panels/PanelMeasurementTableTracking/index.tsx b/extensions/measurement-tracking/src/panels/PanelMeasurementTableTracking/index.tsx
index ced5c7450..8c7d3df03 100644
--- a/extensions/measurement-tracking/src/panels/PanelMeasurementTableTracking/index.tsx
+++ b/extensions/measurement-tracking/src/panels/PanelMeasurementTableTracking/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import {
   StudySummary,
@@ -11,6 +11,7 @@ import { DicomMetadataStore, utils } from '@ohif/core';
 import { useDebounce } from '@hooks';
 import ActionButtons from './ActionButtons';
 import { useTrackedMeasurements } from '../../getContextModule';
+import debounce from 'lodash.debounce';
 
 const { downloadCSVReport } = utils;
 const { formatDate } = utils;
@@ -45,6 +46,7 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
     DISPLAY_STUDY_SUMMARY_INITIAL_VALUE
   );
   const [displayMeasurements, setDisplayMeasurements] = useState([]);
+  const measurementsPanelRef = useRef(null);
 
   useEffect(() => {
     const measurements = measurementService.getMeasurements();
@@ -125,6 +127,11 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
       subscriptions.push(
         measurementService.subscribe(evt, () => {
           setMeasurementsUpdated(Date.now().toString());
+          if (evt === added) {
+            debounce(() => {
+              measurementsPanelRef.current.scrollTop = measurementsPanelRef.current.scrollHeight;
+            }, 300)();
+          }
         }).unsubscribe
       );
     });
@@ -241,6 +248,7 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
     <>
       <div
         className="overflow-x-hidden overflow-y-auto invisible-scrollbar"
+        ref={measurementsPanelRef}
         data-cy={'trackedMeasurements-panel'}
       >
         {displayStudySummary.key && (