From 0c7294a62885fec1bc1658b390d4e13930e7019f Mon Sep 17 00:00:00 2001
From: Andrew Mavdryk <andrii.mavdryk@globallogic.com>
Date: Sun, 7 Jul 2024 11:11:08 +0300
Subject: [PATCH] Fix [Create Vector] UI partial load (#2578)

---
 .../AddToFeatureVectorPage.js                 | 17 ++++++++
 .../AddToFeatureVectorView.js                 | 41 +++++++++++--------
 2 files changed, 42 insertions(+), 16 deletions(-)

diff --git a/src/components/AddToFeatureVectorPage/AddToFeatureVectorPage.js b/src/components/AddToFeatureVectorPage/AddToFeatureVectorPage.js
index 5d16eb940..589626383 100644
--- a/src/components/AddToFeatureVectorPage/AddToFeatureVectorPage.js
+++ b/src/components/AddToFeatureVectorPage/AddToFeatureVectorPage.js
@@ -47,10 +47,13 @@ import { setTablePanelOpen } from '../../reducers/tableReducer'
 import { showErrorNotification } from '../../utils/notifications.util'
 import { useGetTagOptions } from '../../hooks/useGetTagOptions.hook'
 import { useGroupContent } from '../../hooks/groupContent.hook'
+import { useVirtualization } from '../../hooks/useVirtualization.hook'
 import { useYaml } from '../../hooks/yaml.hook'
 
 import { ReactComponent as Yaml } from 'igz-controls/images/yaml.svg'
 
+import cssVariables from '../FeatureStore/Features/features.scss'
+
 const AddToFeatureVectorPage = ({
   createNewFeatureVector,
   featureStore,
@@ -285,6 +288,19 @@ const AddToFeatureVectorPage = ({
     }
   }, [dispatch])
 
+  const virtualizationConfig = useVirtualization({
+    rowsData: {
+      content: tableContent,
+      expandedRowsData: selectedRowData
+    },
+    heightData: {
+      headerRowHeight: cssVariables.featuresHeaderRowHeight,
+      rowHeight: cssVariables.featuresRowHeight,
+      rowHeightExtended: cssVariables.featuresRowHeightExtended
+    }
+  })
+  console.log('virtualizationConfig', virtualizationConfig)
+
   return (
     <AddToFeatureVectorView
       actionsMenu={actionsMenu}
@@ -301,6 +317,7 @@ const AddToFeatureVectorPage = ({
       tableContent={tableContent}
       tableStore={tableStore}
       toggleConvertedYaml={toggleConvertedYaml}
+      virtualizationConfig={virtualizationConfig}
     />
   )
 }
diff --git a/src/components/AddToFeatureVectorPage/AddToFeatureVectorView.js b/src/components/AddToFeatureVectorPage/AddToFeatureVectorView.js
index 655079525..aec54eccc 100644
--- a/src/components/AddToFeatureVectorPage/AddToFeatureVectorView.js
+++ b/src/components/AddToFeatureVectorPage/AddToFeatureVectorView.js
@@ -29,9 +29,11 @@ import Table from '../Table/Table'
 import FeatureStoreTableRow from '../../elements/FeatureStoreTableRow/FeatureStoreTableRow'
 import YamlModal from '../../common/YamlModal/YamlModal'
 
-import { filters } from './addToFeatureVectorPage.util'
 import { ADD_TO_FEATURE_VECTOR_TAB, FEATURE_STORE_PAGE } from '../../constants'
+import { VIRTUALIZATION_CONFIG } from '../../types'
+import { filters } from './addToFeatureVectorPage.util'
 import { getNoDataMessage } from '../../utils/getNoDataMessage'
+import { isRowRendered } from '../../hooks/useVirtualization.hook'
 
 const AddToFeatureVectorView = React.forwardRef(
   (
@@ -48,7 +50,8 @@ const AddToFeatureVectorView = React.forwardRef(
       selectedRowData,
       tableContent,
       tableStore,
-      toggleConvertedYaml
+      toggleConvertedYaml,
+      virtualizationConfig
     },
     ref
   ) => {
@@ -87,21 +90,26 @@ const AddToFeatureVectorView = React.forwardRef(
                   pageData={pageData}
                   retryRequest={fetchData}
                   tab={ADD_TO_FEATURE_VECTOR_TAB}
+                  tableClassName="features-table"
                   tableHeaders={tableContent[0]?.content ?? []}
+                  virtualizationConfig={virtualizationConfig}
                 >
-                  {tableContent.map((tableItem, index) => (
-                    <FeatureStoreTableRow
-                      actionsMenu={actionsMenu}
-                      handleExpandRow={handleExpandRow}
-                      key={index}
-                      hideActionsMenu={tableStore.isTablePanelOpen}
-                      mainRowItemsCount={2}
-                      pageTab={ADD_TO_FEATURE_VECTOR_TAB}
-                      rowIndex={index}
-                      rowItem={tableItem}
-                      selectedRowData={selectedRowData}
-                    />
-                  ))}
+                  {tableContent.map(
+                    (tableItem, index) =>
+                      isRowRendered(virtualizationConfig, index) && (
+                        <FeatureStoreTableRow
+                          actionsMenu={actionsMenu}
+                          handleExpandRow={handleExpandRow}
+                          key={index}
+                          hideActionsMenu={tableStore.isTablePanelOpen}
+                          mainRowItemsCount={2}
+                          pageTab={ADD_TO_FEATURE_VECTOR_TAB}
+                          rowIndex={index}
+                          rowItem={tableItem}
+                          selectedRowData={selectedRowData}
+                        />
+                      )
+                  )}
                 </Table>
               </>
             )}
@@ -128,7 +136,8 @@ AddToFeatureVectorView.propTypes = {
   selectedRowData: PropTypes.object.isRequired,
   tableContent: PropTypes.arrayOf(PropTypes.object).isRequired,
   tableStore: PropTypes.object.isRequired,
-  toggleConvertedYaml: PropTypes.func.isRequired
+  toggleConvertedYaml: PropTypes.func.isRequired,
+  virtualizationConfig: VIRTUALIZATION_CONFIG.isRequired
 }
 
 export default AddToFeatureVectorView