Cleanup after tests of ag-grid optimization

apps/trading/pages/index.page.tsx

@@ -4,68 +4,14 @@ import {
   Callout,
   Intent,
 } from '@vegaprotocol/ui-toolkit';
-import type { GridApi } from 'ag-grid-community';
 import { AgGridColumn } from 'ag-grid-react';
-import { useState, useEffect, useRef } from 'react';
-import { useApplyGridTransaction } from '@vegaprotocol/react-helpers';
 
-const Grid = () => {
+export function Index() {
   const rowData = [
     { make: 'Toyota', model: 'Celica', price: 35000 },
     { make: 'Ford', model: 'Mondeo', price: 32000 },
     { make: 'Porsche', model: 'Boxter', price: 72000 },
   ];
-  const ref = useRef(rowData);
-  const getRowNodeId = (data: { make: string }) => data.make;
-  const gridApi = useRef<GridApi | null>(null);
-  useEffect(() => {
-    const interval = setInterval(() => {
-      if (!gridApi) return;
-      const update = [];
-      const add = [];
-
-      // split into updates and adds
-      [...rowData].forEach((data) => {
-        if (!gridApi.current) return;
-
-        const rowNode = gridApi.current.getRowNode(getRowNodeId(data));
-
-        if (rowNode) {
-          if (rowNode.data !== data) {
-            update.push(data);
-          }
-        } else {
-          add.push(data);
-        }
-      });
-      // async transaction for optimal handling of high grequency updates
-      if (update.length || add.length) {
-        gridApi.current.applyTransaction({
-          update,
-          add,
-          addIndex: 0,
-        });
-      }
-    }, 1000);
-    return () => clearInterval(interval);
-  });
-  return (
-    <AgGrid
-      onGridReady={(params) => {
-        gridApi.current = params.api;
-      }}
-      getRowNodeId={getRowNodeId}
-      rowData={ref.current}
-      style={{ height: 400, width: 600 }}
-    >
-      <AgGridColumn field="make"></AgGridColumn>
-      <AgGridColumn field="model"></AgGridColumn>
-      <AgGridColumn field="price"></AgGridColumn>
-    </AgGrid>
-  );
-};
-
-export function Index() {
   return (
     <div className="m-24">
       <div className="mb-24">
@@ -83,7 +29,11 @@ export function Index() {
           </div>
         </Callout>
       </div>
-      <Grid />
+      <AgGrid rowData={rowData} style={{ height: 400, width: 600 }}>
+        <AgGridColumn field="make"></AgGridColumn>
+        <AgGridColumn field="model"></AgGridColumn>
+        <AgGridColumn field="price"></AgGridColumn>
+      </AgGrid>
     </div>
   );
 }

apps/trading/pages/markets/index.page.tsx

@@ -51,10 +51,8 @@ const Markets = () => {
               if (updatedData !== rowNode.data.data) {
                 update.push({ ...rowNode.data, data: delta });
               }
-            } /* else {
-            add.push(d);
-          }*/
-            // async transaction for optimal handling of high grequency updates
+            }
+            // @TODO - else add new market
             if (update.length || add.length) {
               gridRef.current.api.applyTransactionAsync({
                 update,