Fix [Models endpoints monitoring, metrics] The scroll is disappeared …

…when collapsed the Endpoint call count (#2594)
mlrun · Jul 10, 2024 · 6208f13 · 6208f13
1 parent b3e0b48
commit 6208f13
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 21 deletions.
diff --git a/src/components/DetailsMetrics/DetailsMetrics.js b/src/components/DetailsMetrics/DetailsMetrics.js
@@ -136,25 +136,27 @@ const DetailsMetrics = ({ selectedItem }) => {
     }
   }, [])
 
-  const expandOrCollapseInvocationCard = useCallback(() => {
-    const invocationBodyCard = invocationBodyCardRef.current
-    const metricsContainer = metricsContainerRef.current
-
-    if (!invocationBodyCard || !metricsContainer) return
+  const expandInvocationCard = useCallback(
+    (isUnpinAction = false) => {
+      const invocationBodyCard = invocationBodyCardRef.current
+      const metricsContainer = metricsContainerRef.current
+      const isOnlyOneMetric = generatedMetrics.length === 1
 
-    const containerOverflow =
-      metricsContainer.parentNode.scrollHeight !== metricsContainer.parentNode.clientHeight
+      if (!invocationBodyCard || !metricsContainer) return
 
-    if (containerOverflow) {
-      if (isInvocationCardExpanded) {
+      if (!isUnpinAction && isOnlyOneMetric) {
         setIsInvocationCardExpanded(true)
-      } else {
-        setIsInvocationCardExpanded(false)
+      } else if (isUnpinAction) {
+        enableScrollRef.current = false
+        metricsContainer.parentNode.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
+        setIsInvocationCardExpanded(true)
+        setTimeout(() => {
+          enableScrollRef.current = true
+        }, INVOCATION_CARD_SCROLL_DELAY)
       }
-    } else if (generatedMetrics.length === 1) {
-      setIsInvocationCardExpanded(true)
-    }
-  }, [generatedMetrics, invocationBodyCardRef, isInvocationCardExpanded, metricsContainerRef])
+    },
+    [generatedMetrics]
+  )
 
   const handleWindowScroll = useCallback(
     e => {
@@ -190,8 +192,6 @@ const DetailsMetrics = ({ selectedItem }) => {
         setTimeout(() => {
           enableScrollRef.current = true
         }, INVOCATION_CARD_SCROLL_DELAY)
-      } else if (!scrollTopPosition && !isInvocationCardExpanded && enableScrollRef.current) {
-        setIsInvocationCardExpanded(true)
       }
 
       prevScrollPositionRef.current = scrollTopPosition
@@ -227,8 +227,8 @@ const DetailsMetrics = ({ selectedItem }) => {
   }, [handleChangeDates])
 
   useEffect(() => {
-    expandOrCollapseInvocationCard()
-  }, [metrics, expandOrCollapseInvocationCard])
+    expandInvocationCard()
+  }, [metrics, expandInvocationCard])
 
   useEffect(() => {
     window.addEventListener('scroll', handleWindowScroll, true)
@@ -401,6 +401,7 @@ const DetailsMetrics = ({ selectedItem }) => {
                         metric={metric}
                         previousTotalInvocation={previousTotalInvocation}
                         selectedDate={selectedDate}
+                        expandInvocationCard={expandInvocationCard}
                       />
                     )
                   }

diff --git a/src/components/DetailsMetrics/DetailsMetrics.scss b/src/components/DetailsMetrics/DetailsMetrics.scss
@@ -217,6 +217,12 @@ $stickyHeaderHeight: 55px;
       }
     }
 
+    &-pin-icon {
+      position: absolute;
+      top: -10px;
+      left: -15px;
+    }
+
     &-invocation-header {
       display: flex;
       flex: 1;

diff --git a/src/components/DetailsMetrics/IncvocationMetricCard.js b/src/components/DetailsMetrics/IncvocationMetricCard.js
@@ -23,6 +23,7 @@ import classNames from 'classnames'
 
 import StatsCard from '../../common/StatsCard/StatsCard'
 import MetricChart from '../MetricChart/MetricChart'
+import { RoundedIcon } from 'igz-controls/components'
 
 import {
   calculatePercentageDrift,
@@ -34,12 +35,19 @@ import { CHART_TYPE_LINE } from '../../constants'
 
 import { ReactComponent as ArrowUp } from 'igz-controls/images/arrow-up.svg'
 import { ReactComponent as ArrowDown } from 'igz-controls/images/arrow-down.svg'
+import { ReactComponent as UnpinIcon } from 'igz-controls/images/unpin-icon.svg'
 
 import colors from 'igz-controls/scss/colors.scss'
 
 const InvocationMetricCard = forwardRef(
   (
-    { isInvocationCardExpanded, metric, previousTotalInvocation, selectedDate },
+    {
+      isInvocationCardExpanded,
+      metric,
+      previousTotalInvocation,
+      selectedDate,
+      expandInvocationCard
+    },
     invocationBodyCardRef
   ) => {
     const invocationCardClassnames = classNames(
@@ -76,6 +84,15 @@ const InvocationMetricCard = forwardRef(
             ref={invocationBodyCardRef}
             className={`metrics__card-body ${isInvocationCardExpanded ? 'metrics__card-body-expanded' : 'metrics__card-body-collapsed'}`}
           >
+              {!isInvocationCardExpanded && (
+                  <RoundedIcon
+                      className="metrics__card-pin-icon"
+                      onClick={() => expandInvocationCard(true)}
+                      tooltipText={'Expand Invocation Card'}
+                  >
+                      <UnpinIcon />
+                  </RoundedIcon>
+              )}
             <div
               className={`metrics__card-invocation-content ${!isInvocationCardExpanded && 'metrics__card-invocation-content-visible'}`}
             >
@@ -133,6 +150,7 @@ const InvocationMetricCard = forwardRef(
 )
 
 InvocationMetricCard.propTypes = {
+  expandInvocationCard: PropTypes.func.isRequired,
   isInvocationCardExpanded: PropTypes.bool.isRequired,
   metric: PropTypes.object.isRequired,
   previousTotalInvocation: PropTypes.number,

diff --git a/src/components/DetailsMetrics/detailsMetrics.util.js b/src/components/DetailsMetrics/detailsMetrics.util.js
@@ -31,7 +31,7 @@ export const METRIC_COMPUTED_AVG_POINTS = 'metric_computed_avg_points'
 export const METRIC_RAW_AVG_POINTS = 'metric_raw_avg_points'
 export const DRIFT_UP = 'drift_up'
 export const INVOCATION_CARD_SCROLL_THRESHOLD = 20
-export const INVOCATION_CARD_SCROLL_DELAY = 1000
+export const INVOCATION_CARD_SCROLL_DELAY = 500
 export const ML_RUN_INFRA = 'mlrun-infra'
 export const METRIC_RAW_TOTAL_POINTS = 'metric_raw_total_points'
 export const METRIC_COMPUTED_TOTAL_POINTS = 'metric_computed_total_points'