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,9 +934,7 @@ export function RelationshipEditor({
     });
   };
 
-  console.log("data dump")
-  console.log(data)
-  const { drawCell, provideEditor } = useCustomCells(
+  const { customRenderers } = useCustomCells(
     relationshipsService,
     data,
     gridSelection,
@@ -1009,8 +1006,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 +1015,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/customcells.ts

@@ -54,8 +54,7 @@ export function useCustomCells(
   columnsWithWidths: Column[],
   isReadOnly: boolean,
 ): {
-  drawCell: DrawCallback;
-  provideEditor: ProvideEditorCallback<GridCell>;
+  customRenderers: readonly any[];
 } {
   const selectedType = useMemo(() => {
     if (!gridSelection?.current?.cell) {
@@ -253,42 +252,5 @@ 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 };
+  return { customRenderers: renderers };
 }