Fix [Artifacts, Functions] selected item is missing from the list of visible items

src/components/Datasets/Datasets.js

@@ -392,7 +392,8 @@ const Datasets = () => {
       headerRowHeight: cssVariables.datasetsHeaderRowHeight,
       rowHeight: cssVariables.datasetsRowHeight,
       rowHeightExtended: cssVariables.datasetsRowHeightExtended
-    }
+    },
+    activateTableScroll: true
   })
 
   return (

src/components/Files/Files.js

@@ -384,7 +384,8 @@ const Files = () => {
       headerRowHeight: cssVariables.filesHeaderRowHeight,
       rowHeight: cssVariables.filesRowHeight,
       rowHeightExtended: cssVariables.filesRowHeightExtended
-    }
+    },
+    activateTableScroll: true
   })
 
   return (

src/components/FunctionsPage/Functions.js

@@ -696,7 +696,8 @@ const Functions = ({
       headerRowHeight: cssVariables.functionsHeaderRowHeight,
       rowHeight: cssVariables.functionsRowHeight,
       rowHeightExtended: cssVariables.functionsRowHeightExtended
-    }
+    },
+    activateTableScroll: true
   })
 
   return (

src/components/ModelsPage/Models/Models.js

@@ -499,7 +499,8 @@ const Models = ({ fetchModelFeatureVector }) => {
       headerRowHeight: cssVariables.modelsHeaderRowHeight,
       rowHeight: cssVariables.modelsRowHeight,
       rowHeightExtended: cssVariables.modelsRowHeightExtended
-    }
+    },
+    activateTableScroll: true
   })
 
   return (

src/elements/ArtifactsTableRow/ArtifactsTableRow.js

@@ -83,6 +83,7 @@ const ArtifactsTableRow = ({
                     const cellClassName = classnames(
                       index >= mainRowItemsCount && 'table-body__cell_hidden'
                     )
+
                     return (
                       !data.hidden && (
                         <TableCell

src/hooks/useVirtualization.hook.js

@@ -17,7 +17,7 @@ illegal under applicable law, and the grant of the foregoing license
 under the Apache 2.0 license is conditioned upon your compliance with
 such restriction.
 */
-import { useLayoutEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import { isEmpty, isEqual, sum, throttle } from 'lodash'
 import { MAIN_TABLE_ID, MAIN_TABLE_BODY_ID } from '../constants'
 
@@ -71,6 +71,121 @@ export const getRowsSizes = (
   })
 }
 
+/**
+ * Hook for scrolling a table to a selected item.
+ * @param {Object} options - Options object.
+ * @param {React.RefObject} options.tableRef - Ref object for the table element.
+ * @param {Object[]} options.content - Array containing content for each row.
+ * @param {Object{}} options.selectedItem - Object representing the currently selected item.
+ * @param {Object} options.expandedRowsData - Object containing data for expanded rows.
+ * @param {string|number} options.rowHeight - Height of a regular row.
+ * @param {string|number} options.rowHeightExtended - Height of an extended row.
+ * @param {string|number} options.headerRowHeight - Height of an table header.
+ * @param {boolean} options.useHook - Bool indicate if trigger the hooks logic.
+ * @returns {void}
+ */
+const useTableScroll = ({
+  rowHeight,
+  rowHeightExtended,
+  headerRowHeight,
+  selectedItem,
+  expandedRowsData,
+  content,
+  activateHook
+}) => {
+  const lastSelectedItemDataRef = useRef(null)
+
+  const getSpaceToSelectedItem = useCallback(
+    (lastSelectedItemData, tableElement) => {
+      const baseRowHeight = isEmpty(selectedItem) ? rowHeight : rowHeightExtended
+      const tableHeight = tableElement?.offsetHeight
+      const rowsSizes = getRowsSizes(
+        content,
+        selectedItem,
+        expandedRowsData,
+        rowHeight,
+        rowHeightExtended
+      )
+      let spaceToSelectedItem =
+        sum(rowsSizes.slice(0, lastSelectedItemData.index)) -
+        (tableHeight ? (tableHeight - headerRowHeight) / 2 - baseRowHeight / 2 : 0)
+
+      if (!isEmpty(lastSelectedItemData?.expandedRowData?.content)) {
+        const selectedChildItemPosition =
+          lastSelectedItemData?.expandedRowData?.content.findIndex(
+            item => item.data.ui.identifierUnique === lastSelectedItemData.identifierUnique
+          ) + 1
+
+        if (selectedChildItemPosition > 0) {
+          const diffBetweenParentRowAndOtherMainRows = baseRowHeight - rowHeight
+          spaceToSelectedItem +=
+            baseRowHeight * selectedChildItemPosition - diffBetweenParentRowAndOtherMainRows
+        }
+      }
+
+      return spaceToSelectedItem
+    },
+    [content, expandedRowsData, headerRowHeight, rowHeight, rowHeightExtended, selectedItem]
+  )
+
+  const handleSelectItemChanges = useCallback((identifier, content, getSpaceToSelectedItem, async = false) => {
+    const selectedItemIndex = content.findIndex(
+      item => item.data.ui.identifier === identifier
+    )
+    const triggerScroll = () => {
+      const tableElement = document.getElementById(MAIN_TABLE_ID)
+
+      tableElement?.scroll({
+        top: getSpaceToSelectedItem(
+          {
+            ...lastSelectedItemDataRef.current,
+            index: selectedItemIndex
+          },
+          tableElement
+        )
+      })
+    }
+
+    if (selectedItemIndex >= 0) {
+      if (async) {
+        requestAnimationFrame(() => {
+          triggerScroll()
+        })
+      } else {
+        triggerScroll()
+      }
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!activateHook) return
+
+    try {
+      if (!isEmpty(selectedItem)) {
+        if (!lastSelectedItemDataRef.current) {
+          lastSelectedItemDataRef.current = {
+            ...selectedItem?.ui,
+            expandedRowData: expandedRowsData[selectedItem?.ui?.identifier]
+          }
+          handleSelectItemChanges(selectedItem?.ui?.identifier, content, getSpaceToSelectedItem, true)
+        } else {
+          lastSelectedItemDataRef.current = {
+            ...selectedItem?.ui,
+            expandedRowData: expandedRowsData[selectedItem?.ui?.identifier]
+          }
+        }
+      } else if (lastSelectedItemDataRef.current && isEmpty(selectedItem)) {
+        handleSelectItemChanges(lastSelectedItemDataRef.current?.identifier, content, getSpaceToSelectedItem)
+
+        lastSelectedItemDataRef.current = null
+      }
+    } catch (e) {
+      lastSelectedItemDataRef.current = null
+      console.warn('useTableScrollHook:: Error during table scroll attempt', e)
+    }
+  }, [content, getSpaceToSelectedItem, selectedItem, expandedRowsData, activateHook, handleSelectItemChanges])
+}
+
 /**
  * Hook for virtualizing a table.
  * @param {Object} options - Options object.
@@ -84,6 +199,7 @@ export const getRowsSizes = (
  * @param {string|number} options.heightData.rowHeight - Height of a regular row.
  * @param {string|number} options.heightData.rowHeightExtended - Height of an extended row.
  * @param {string|number} options.heightData.headerRowHeight - Height of the table header row.
+ * @param {boolean} options.activateTableScroll - Boolean indicator for useTableScroll hook.
  * @returns {Object} - Object containing virtualization configuration.
  */
 export const useVirtualization = ({
@@ -92,7 +208,8 @@ export const useVirtualization = ({
   rowsData = {
     content: []
   },
-  heightData: { rowHeight, rowHeightExtended, headerRowHeight }
+  heightData: { rowHeight, rowHeightExtended, headerRowHeight },
+  activateTableScroll = false
 }) => {
   const [virtualizationConfig, setVirtualizationConfig] = useState(virtualizationConfigInitialState)
   const [rowsSizesLocal, setRowsSizesLocal] = useState(rowsSizes)
@@ -130,8 +247,8 @@ export const useVirtualization = ({
   ])
 
   useLayoutEffect(() => {
-    const tableElement = document.querySelector(`#${MAIN_TABLE_ID}`)
-    const tableBodyElement = document.querySelector(`#${MAIN_TABLE_BODY_ID}`)
+    const tableElement = document.getElementById(MAIN_TABLE_ID)
+    const tableBodyElement = document.getElementById(MAIN_TABLE_BODY_ID)
     const elementsHeight = sum(rowsSizesLocal)
 
     const calculateVirtualizationConfig = throttle(() => {
@@ -219,5 +336,15 @@ export const useVirtualization = ({
     }
   }, [renderTriggerItem, headerRowHeightLocal, rowsSizesLocal, rowsData.content])
 
+  useTableScroll({
+    rowHeight: rowHeightLocal,
+    rowHeightExtended: extendedRowHeightLocal,
+    headerRowHeight: headerRowHeightLocal,
+    selectedItem: rowsData.selectedItem,
+    expandedRowsData: rowsData.expandedRowsData,
+    content: rowsData.content,
+    activateHook: activateTableScroll
+  })
+
   return virtualizationConfig
 }

src/utils/parseArtifacts.js

@@ -22,7 +22,7 @@ import { getArtifactIdentifier } from './getUniqueIdentifier'
 import { isEmpty } from 'lodash'
 
 export const parseArtifacts = artifacts =>
-  (artifacts ?? []).map(artifact => {
+  (artifacts ?? []).reduce((parsedArtifacts, artifact) => {
     if (!isEmpty(artifact)) {
       let item = { ...artifact }
 
@@ -35,14 +35,16 @@ export const parseArtifacts = artifacts =>
         }
       }
 
-      return {
+      parsedArtifacts.push({
         ...item,
         kind: artifact.kind,
         ui: {
           originalContent: artifact,
           identifier: getArtifactIdentifier(item),
           identifierUnique: getArtifactIdentifier(item, true)
         }
-      }
+      })
     }
-  })
+
+    return parsedArtifacts
+  }, [])