Fix rendering of custom cells

Author: tstirrat15

src/spicedb-common/components/relationshipeditor/RelationshipEditor.tsx

@@ -470,7 +470,6 @@ export function RelationshipEditor({
 
   const getCellData = useCallback(
     ([col, row]: readonly [number, number]): GridCell => {
-      console.log("getting cell data")
       if (row >= data.length) {
         return {
           kind: GridCellKind.Text,
@@ -935,16 +934,13 @@ export function RelationshipEditor({
     });
   };
 
-  console.log("data dump")
-  console.log(data)
-  const { drawCell, provideEditor } = useCustomCells(
+  const { customRenderers } = useCustomCells(
     relationshipsService,
     data,
     gridSelection,
     resolver,
     similarHighlighting,
     columnsWithWidths,
-    isReadOnly,
   );
 
   // TODO: get JSX out of state.
@@ -1009,8 +1005,6 @@ export function RelationshipEditor({
           label="Highlight same types, objects and relations"
         />
       </div>
-      {console.log("this is how long we think data is")}
-      {console.log(data.length)}
       <DataEditor
         theme={dataEditorTheme}
         keybindings={{ search: true }}
@@ -1020,8 +1014,7 @@ export function RelationshipEditor({
         columns={columnsWithWidths}
         rows={data.length}
         onPaste={handlePaste}
-        drawCell={drawCell}
-        provideEditor={provideEditor}
+        customRenderers={customRenderers}
         getCellsForSelection={getCellsForSelection}
         onCellEdited={isReadOnly ? undefined : handleCellEdited}
         onRowAppended={isReadOnly ? undefined : handleRowAppended}

src/spicedb-common/components/relationshipeditor/commentcell.tsx

@@ -1,4 +1,8 @@
-import { CustomCell, DrawCellCallback } from "@glideapps/glide-data-grid";
+import {
+  CustomCell,
+  CustomRenderer,
+  GridCellKind,
+} from "@glideapps/glide-data-grid";
 import TextField from "@material-ui/core/TextField";
 import React, { MutableRefObject, useEffect, useRef } from "react";
 import { Column, CommentCellPrefix } from "./columns";
@@ -93,12 +97,13 @@ const CommentCellEditor = (props: CommentCellEditorProps) => {
 
 export const CommentCellRenderer = (
   props: MutableRefObject<FieldCellRendererProps>,
-) => {
+): CustomRenderer<CommentCell> => {
   return {
+    kind: GridCellKind.Custom,
     isMatch: (cell: CustomCell): cell is CommentCell =>
       // TODO: see if there's a way to do this without casting the cell
       (cell as CommentCell).data.kind === COMMENT_CELL_KIND,
-    draw: (args: Parameters<DrawCellCallback>[0], cell: CommentCell) => {
+    draw: (args, cell) => {
       const { ctx, rect } = args;
       const { dataValue } = cell.data;
       ctx.save();
@@ -115,7 +120,7 @@ export const CommentCellRenderer = (
       ctx.restore();
       return true;
     },
-    provideEditor: () => (p: CommentCellEditorProps) => {
+    provideEditor: () => (p) => {
       const { onChange, value, initialValue } = p;
       return (
         <CommentCellEditor

src/spicedb-common/components/relationshipeditor/customcells.ts

@@ -1,11 +1,9 @@
 import {
   type DataEditorProps,
-  type GridCell,
-  GridCellKind,
+  type CustomRenderer,
   type GridSelection,
-  type ProvideEditorCallback,
 } from "@glideapps/glide-data-grid";
-import { useCallback, useMemo, useRef } from "react";
+import { useMemo, useRef } from "react";
 import { Resolver } from "../../parsers/dsl/resolution";
 import { RelationshipsService } from "../../services/relationshipsservice";
 import { COLUMNS, Column, DataKind } from "./columns";
@@ -52,10 +50,12 @@ export function useCustomCells(
   resolver: Resolver | undefined,
   similarHighlighting: boolean,
   columnsWithWidths: Column[],
-  isReadOnly: boolean,
 ): {
-  drawCell: DrawCallback;
-  provideEditor: ProvideEditorCallback<GridCell>;
+  // The type we're providing here is about as narrow as we can
+  // get without fully figuring out a discriminated union here.
+  // TODO: Make this part type-safe by figuring out the types.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  customRenderers: readonly CustomRenderer<any>[];
 } {
   const selectedType = useMemo(() => {
     if (!gridSelection?.current?.cell) {
@@ -253,42 +253,9 @@ export function useCustomCells(
     ];
   }, []);
 
-  // TODO: come up with a way to express this that doesn't require looping.
-  const drawCell = useCallback<DrawCallback>(
-    (args) => {
-      console.log("calling drawCell");
-      console.log(args);
-      const { cell } = args;
-      console.log("cell.kind:", cell.kind);
-      console.log(cell);
-      if (cell.kind !== GridCellKind.Custom) return false;
-      console.log("looping over renderers");
-      for (const r of renderers) {
-        if (r.isMatch(cell)) {
-          // @ts-expect-error typescript can't see that we're looping over something static
-          return r.draw(args, cell);
-        }
-      }
-      return false;
-    },
-    [renderers],
-  );
-
-  const provideEditor = useCallback<ProvideEditorCallback<GridCell>>(
-    // @ts-expect-error typescript can't see that we're looping over something static.
-    (cell) => {
-      if (cell.kind !== GridCellKind.Custom || isReadOnly) return undefined;
-
-      for (const r of renderers) {
-        if (r.isMatch(cell)) {
-          return r.provideEditor();
-        }
-      }
-
-      return undefined;
-    },
-    [renderers, isReadOnly],
-  );
-
-  return { drawCell, provideEditor };
+  // TODO: there seems to be a type bug in glide-data-grid where
+  // the inferred type on provideEditor doesn't match the type
+  // that's expected here. You can remove the `as` to see what i mean.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return { customRenderers: renderers as CustomRenderer<any>[] };
 }

src/spicedb-common/components/relationshipeditor/fieldcell.tsx

@@ -1,5 +1,6 @@
 import {
   CustomCell,
+  GridCellKind,
   DrawCellCallback,
   GridSelection,
 } from "@glideapps/glide-data-grid";
@@ -124,6 +125,7 @@ function fieldCellRenderer<T extends CustomCell<Q>, Q extends FieldCellProps>(
     return {
       // TODO: see if there's a way to do this without the as
       isMatch: (cell: CustomCell): cell is T => (cell as T).data.kind === kind,
+      kind: GridCellKind.Custom,
       draw: (args: Parameters<DrawCellCallback>[0], cell: CustomCell<Q>) => {
         const { ctx, rect, row, col, theme, highlighted } = args;
         let { dataValue } = cell.data;