From a61d5cf5814a6fef79485a4355eb36b19c96f00a Mon Sep 17 00:00:00 2001
From: Matthew Russell <mattrussell36@gmail.com>
Date: Mon, 7 Aug 2023 17:42:50 +0100
Subject: [PATCH] chore: add visible and moved events to grid callbacks

---
 .../src/lib/ag-grid/ag-grid-lazy-themed.tsx   |  5 +-
 libs/datagrid/src/lib/use-datagrid-events.ts  | 48 +++++++++----------
 libs/positions/src/lib/positions-table.tsx    |  3 +-
 3 files changed, 26 insertions(+), 30 deletions(-)

diff --git a/libs/datagrid/src/lib/ag-grid/ag-grid-lazy-themed.tsx b/libs/datagrid/src/lib/ag-grid/ag-grid-lazy-themed.tsx
index acc43670b..fbaea2dc0 100644
--- a/libs/datagrid/src/lib/ag-grid/ag-grid-lazy-themed.tsx
+++ b/libs/datagrid/src/lib/ag-grid/ag-grid-lazy-themed.tsx
@@ -37,10 +37,7 @@ export const AgGridThemed = ({
       <AgGridReact
         {...defaultProps}
         {...props}
-        defaultColDef={{
-          ...defaultColDef,
-          ...props.defaultColDef,
-        }}
+        defaultColDef={defaultColDef}
         ref={gridRef}
       />
     </div>
diff --git a/libs/datagrid/src/lib/use-datagrid-events.ts b/libs/datagrid/src/lib/use-datagrid-events.ts
index abbb55893..6f226dd15 100644
--- a/libs/datagrid/src/lib/use-datagrid-events.ts
+++ b/libs/datagrid/src/lib/use-datagrid-events.ts
@@ -1,9 +1,11 @@
 import debounce from 'lodash/debounce';
 import type {
+  ColumnMovedEvent,
   ColumnResizedEvent,
   ColumnState,
+  ColumnVisibleEvent,
   FilterChangedEvent,
-  GridReadyEvent,
+  FirstDataRenderedEvent,
   SortChangedEvent,
 } from 'ag-grid-community';
 import { useCallback, useMemo } from 'react';
@@ -14,7 +16,8 @@ type State = {
   columnState?: ColumnState[];
 };
 
-type Event = FilterChangedEvent | SortChangedEvent;
+type GridEvent = FilterChangedEvent | SortChangedEvent;
+type ColEvent = ColumnResizedEvent | ColumnMovedEvent | ColumnVisibleEvent;
 
 export const GRID_EVENT_DEBOUNCE_TIME = 300;
 
@@ -26,34 +29,27 @@ export const useDataGridEvents = (
   // grid callback, so its memoized to only update after resizing is finished
   const onGridChange = useMemo(
     () =>
-      debounce(({ api, columnApi }: Event) => {
-        if (!api || !columnApi) return;
-        const columnState = columnApi.getColumnState();
+      debounce(({ api }: GridEvent) => {
+        if (!api) return;
         const filterModel = api.getFilterModel();
-        callback({ columnState, filterModel });
+        callback({ filterModel });
       }, GRID_EVENT_DEBOUNCE_TIME),
     [callback]
   );
 
-  // This function can be called very frequently by the onColumnResized
-  // grid callback, so its memoized to only update after resizing is finished
-  const onColumnResized = ({
-    columnApi,
-    source,
-    finished,
-  }: ColumnResizedEvent) => {
-    if (!finished || !columnApi) return;
-
-    // dont store unless the user reszied manually
-    if (source !== 'uiColumnResized') return;
-
-    const columnState = columnApi.getColumnState();
-    callback({ columnState });
-  };
+  const onColumnChange = useMemo(
+    () =>
+      debounce(({ api, columnApi }: ColEvent) => {
+        if (!api || !columnApi) return;
+        const columnState = columnApi.getColumnState();
+        callback({ columnState });
+      }, GRID_EVENT_DEBOUNCE_TIME),
+    [callback]
+  );
 
   // check if we have stored column states or filter models and apply if we do
-  const onGridReady = useCallback(
-    ({ api, columnApi }: GridReadyEvent) => {
+  const onFirstDataRendered = useCallback(
+    ({ api, columnApi }: FirstDataRenderedEvent) => {
       if (!api || !columnApi) return;
 
       if (state.columnState) {
@@ -74,8 +70,10 @@ export const useDataGridEvents = (
   );
 
   return {
-    onGridReady,
-    onColumnResized,
+    onFirstDataRendered,
+    onColumnResized: onColumnChange,
+    onColumnVisible: onColumnChange,
+    onColumnMoved: onColumnChange,
     onFilterChanged: onGridChange,
     onSortChanged: onGridChange,
   };
diff --git a/libs/positions/src/lib/positions-table.tsx b/libs/positions/src/lib/positions-table.tsx
index 2f68ea13f..e920d5152 100644
--- a/libs/positions/src/lib/positions-table.tsx
+++ b/libs/positions/src/lib/positions-table.tsx
@@ -113,7 +113,6 @@ export const PositionsTable = ({
         ProgressBarCell,
         MarketNameCell,
       }}
-      {...props}
       columnDefs={useMemo<ColDef[]>(() => {
         const columnDefs: (ColDef | null)[] = [
           multipleKeys
@@ -223,6 +222,7 @@ export const PositionsTable = ({
             headerName: t('Liquidation price'),
             colId: 'liquidationPrice',
             type: 'rightAligned',
+            cellClass: 'font-mono text-right',
             cellRenderer: ({ data }: VegaICellRendererParams<Position>) => {
               if (!data) return null;
               return (
@@ -430,6 +430,7 @@ export const PositionsTable = ({
         pubKey,
         pubKeys,
       ])}
+      {...props}
     />
   );
 };