Merge pull request #19 from filecoin-saturn/improve-grid-readability

improve grid readability

Author: guanzo

src/components/StatsGrid/StatsGrid.tsx

@@ -20,24 +20,18 @@ export default function StatsGrid() {
     [setGridApi, setColumnApi]
   );
 
-  const onGridSizeChanged = useCallback(() => {
-    if (gridApi) {
-      gridApi.sizeColumnsToFit();
+  const autoSizeAllColumns = useCallback(() => {
+    if (columnApi) {
+      columnApi.autoSizeAllColumns();
     }
-  }, [gridApi]);
+  }, [columnApi]);
 
   useEffect(() => {
-    if (gridApi && columnApi) {
+    if (columnApi) {
       columnApi.setColumnsVisible(["operator"], Boolean(state.authorizationToken));
-      gridApi.sizeColumnsToFit();
+      columnApi.autoSizeAllColumns();
     }
-  }, [columnApi, gridApi, state.authorizationToken]);
-
-  useEffect(() => {
-    if (gridApi && state.nodes) {
-      gridApi.sizeColumnsToFit();
-    }
-  }, [gridApi, state.nodes]);
+  }, [columnApi, state.authorizationToken]);
 
   useEffect(() => {
     if (gridApi && columnApi && location.state) {
@@ -63,7 +57,9 @@ export default function StatsGrid() {
           enableCellTextSelection={true}
           ensureDomOrder={true}
           suppressColumnVirtualisation={true}
-          onGridSizeChanged={onGridSizeChanged}
+          onModelUpdated={autoSizeAllColumns}
+          onGridSizeChanged={autoSizeAllColumns}
+          onFirstDataRendered={autoSizeAllColumns}
           getRowId={(params) => params.data.id}
           onGridReady={onGridReady}
           tooltipShowDelay={0}

src/components/StatsGrid/StatsGridConfig.tsx

@@ -171,6 +171,56 @@ export const columnDefs = [
       ];
     },
   },
+  {
+    field: "bias",
+    headerName: "Weight",
+    sortable: true,
+    filter: "agNumberColumnFilter",
+    floatingFilter: true,
+    minWidth: 100,
+    cellRenderer: (params: any) => {
+      return (
+        <>
+          <div
+            className={classNames("overflow-clip text-ellipsis", {
+              "font-bold text-red-500": params.data.bias < -90,
+              "text-red-500": params.data.bias >= -90 && params.data.bias < -60,
+              "text-orange-500": params.data.bias >= -60 && params.data.bias < -30,
+              "text-yellow-500": params.data.bias >= -30 && params.data.bias < 0,
+            })}
+          >
+            {params.data.bias}
+          </div>
+          {params.data.HealthCheckFailures.length > 0 && (
+            <div
+              className={classNames("overflow-clip text-ellipsis", {
+                "text-red-500": params.data.HealthCheckFailures.length >= 4,
+                "text-orange-500": params.data.HealthCheckFailures.length < 4,
+              })}
+            >
+              {params.data.HealthCheckFailures.length} fail{params.data.HealthCheckFailures.length > 1 && "s"} / last
+              24h
+            </div>
+          )}
+        </>
+      );
+    },
+    tooltipComponent: HTMLTooltip,
+    tooltipComponentParams: { className: "capitalize" },
+    tooltipValueGetter: ({ data }: any) => {
+      const biases = asStrings(data.biases, (key: string, value: any) => value);
+
+      if (data.HealthCheckFailures.length) {
+        const fails = `${data.HealthCheckFailures.length} fail${
+          data.HealthCheckFailures.length > 1 ? "s" : ""
+        } in last 24 hours`;
+
+        return [...biases, "<hr />", fails];
+      }
+
+      return biases;
+    },
+  },
   {
     field: "diskStats.usedDisk",
     headerName: "Disk Usage",
@@ -433,55 +483,6 @@ export const columnDefs = [
       );
     },
   },
-  {
-    field: "bias",
-    headerName: "Weight",
-    sortable: true,
-    filter: "agNumberColumnFilter",
-    floatingFilter: true,
-    cellRenderer: (params: any) => {
-      return (
-        <>
-          <div
-            className={classNames("overflow-clip text-ellipsis", {
-              "font-bold text-red-500": params.data.bias < -90,
-              "text-red-500": params.data.bias >= -90 && params.data.bias < -60,
-              "text-orange-500": params.data.bias >= -60 && params.data.bias < -30,
-              "text-yellow-500": params.data.bias >= -30 && params.data.bias < 0,
-            })}
-          >
-            {params.data.bias}
-          </div>
-          {params.data.HealthCheckFailures.length > 0 && (
-            <div
-              className={classNames("overflow-clip text-ellipsis", {
-                "text-red-500": params.data.HealthCheckFailures.length >= 4,
-                "text-orange-500": params.data.HealthCheckFailures.length < 4,
-              })}
-            >
-              {params.data.HealthCheckFailures.length} fail{params.data.HealthCheckFailures.length > 1 && "s"} / last
-              24h
-            </div>
-          )}
-        </>
-      );
-    },
-    tooltipComponent: HTMLTooltip,
-    tooltipComponentParams: { className: "capitalize" },
-    tooltipValueGetter: ({ data }: any) => {
-      const biases = asStrings(data.biases, (key: string, value: any) => value);
-
-      if (data.HealthCheckFailures.length) {
-        const fails = `${data.HealthCheckFailures.length} fail${
-          data.HealthCheckFailures.length > 1 ? "s" : ""
-        } in last 24 hours`;
-
-        return [...biases, "<hr />", fails];
-      }
-
-      return biases;
-    },
-  },
   {
     field: "operator",
     headerName: "Operator",