fix(#2153): improve positions table updates (#2187)

libs/positions/src/lib/positions-data-providers.ts

@@ -83,13 +83,7 @@ export const getMetrics = (
     const marginAccount = accounts?.find((account) => {
       return account.market?.id === market?.id;
     });
-    if (
-      !marginAccount ||
-      !marginLevel ||
-      !market ||
-      !marketData ||
-      position.openVolume === '0'
-    ) {
+    if (!marginAccount || !marginLevel || !market || !marketData) {
       return;
     }
     const generalAccount = accounts?.find(

libs/positions/src/lib/positions.tsx

@@ -1,50 +0,0 @@
-import { useRef, memo } from 'react';
-import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
-import { t } from '@vegaprotocol/react-helpers';
-import type { AgGridReact } from 'ag-grid-react';
-import PositionsTable from './positions-table';
-import type { Position } from './positions-data-providers';
-import { AssetBalance } from '@vegaprotocol/accounts';
-import { usePositionsData } from './use-positions-data';
-
-interface PositionsProps {
-  partyId: string;
-  assetSymbol: string;
-  onClose: (position: Position) => void;
-}
-
-export const Positions = memo(
-  ({ partyId, assetSymbol, onClose }: PositionsProps) => {
-    const gridRef = useRef<AgGridReact | null>(null);
-    const { data, error, loading, getRows } = usePositionsData(
-      partyId,
-      gridRef,
-      assetSymbol
-    );
-
-    return (
-      <AsyncRenderer loading={loading} error={error} data={data}>
-        <div className="flex justify-between items-center px-4 pt-3 pb-1">
-          <h4>
-            {assetSymbol} {t('markets')}
-          </h4>
-          <div className="text-sm text-neutral-500 dark:text-neutral-300">
-            {assetSymbol} {t('balance')}:
-            <span data-testid="balance" className="pl-1 font-mono">
-              <AssetBalance partyId={partyId} assetSymbol={assetSymbol} />
-            </span>
-          </div>
-        </div>
-        <PositionsTable
-          domLayout="autoHeight"
-          style={{ width: '100%' }}
-          ref={gridRef}
-          rowModelType={data?.length ? 'infinite' : 'clientSide'}
-          rowData={data?.length ? undefined : []}
-          datasource={{ getRows }}
-          onClose={onClose}
-        />
-      </AsyncRenderer>
-    );
-  }
-);

libs/positions/src/lib/use-positions-data.tsx

@@ -43,11 +43,16 @@ export const usePositionsData = (
         }
       });
       if (update.length || add.length) {
-        gridRef.current.api.applyTransactionAsync({
+        const rowDataTransaction = {
           update,
           add,
           addIndex: 0,
-        });
+        };
+        if (add.length) {
+          gridRef.current.api.applyTransaction(rowDataTransaction);
+        } else {
+          gridRef.current.api.applyTransactionAsync(rowDataTransaction);
+        }
       }
       return true;
     },

libs/react-helpers/src/lib/generic-data-provider.ts

@@ -646,7 +646,7 @@ function makeDerivedDataProviderInternal<
         const updatedPart = parts[updatedPartIndex];
         if (updatedPart.isUpdate) {
           isUpdate = true;
-          if (updatedPart.delta && combineDelta && data) {
+          if (combineDelta && data) {
             delta = combineDelta(data, parts, previousData, variables);
           }
           delete updatedPart.isUpdate;

libs/react-helpers/src/lib/grid/summary-rows.ts

@@ -4,17 +4,11 @@ export interface SummaryRow {
   __summaryRow?: boolean;
 }
 
-export function addSummaryRows<T>(
+export function addSummaryRows<T extends SummaryRow>(
   api: GridApi,
   columnApi: ColumnApi,
-  getGroupId: (
-    data: T & SummaryRow,
-    columnApi: ColumnApi
-  ) => string | null | undefined,
-  getGroupSummaryRow: (
-    data: (T & SummaryRow)[],
-    columnApi: ColumnApi
-  ) => Partial<T & SummaryRow> | null
+  getGroupId: (data: T, columnApi: ColumnApi) => string | null | undefined,
+  getGroupSummaryRow: (data: T[], columnApi: ColumnApi) => Partial<T> | null
 ) {
   let currentGroupId: string | null | undefined = undefined;
   let group: T[] = [];