Skip to content

Commit bceaf85

Browse files
schloerkeschloerke
committed
Use column indexes, not column ids
1 parent 83a7dae commit bceaf85

File tree

4 files changed

+169
-153
lines changed

4 files changed

+169
-153
lines changed

‎js/dataframe/cell.tsx‎

Lines changed: 57 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,9 @@ interface TableBodyCellProps {
2727
columns: readonly string[];
2828
canEdit: boolean;
2929
editRowIndex: number;
30-
editColumnId: string;
30+
editColumnIndex: number;
3131
setEditRowIndex: (index: number) => void;
32-
setEditColumnId: (id: string) => void;
32+
setEditColumnIndex: (index: number) => void;
3333
cellEditMap: Map<string, { value: string; state: CellState }>;
3434
setData: (fn: (draft: unknown[][]) => void) => void;
3535
setCellEditMap: (
@@ -44,17 +44,17 @@ export const TableBodyCell: FC<TableBodyCellProps> = ({
4444
columns,
4545
canEdit,
4646
editRowIndex,
47-
editColumnId,
47+
editColumnIndex,
4848
setEditRowIndex,
49-
setEditColumnId,
49+
setEditColumnIndex,
5050
cellEditMap,
5151
setData,
5252
setCellEditMap,
5353
maxRowSize,
5454
}) => {
5555
const rowIndex = cell.row.index;
56-
const columnId = cell.column.id;
57-
// const backgroundColor = cellEditMap.has(`[${rowIndex}, ${columnId}]`)
56+
const columnIndex = cell.column.columnDef.meta.colIndex;
57+
// const backgroundColor = cellEditMap.has(`[${rowIndex}, ${columnIndex}]`)
5858
// ? "red"
5959
// : null;
6060

@@ -67,30 +67,30 @@ export const TableBodyCell: FC<TableBodyCellProps> = ({
6767

6868
// interface EditableCellProps {
6969
// rowIndex: number;
70-
// columnId: string;
70+
// columnIndex: string;
7171
// getValue: () => unknown;
7272
// editRowIndex: number;
73-
// editColumnId: string;
73+
// editColumnIndex: string;
7474
// cellEditMap: Map<string, { value: string; state: CellState }>;
7575
// }
7676
// return (
7777
// <EditableCell
7878
// rowIndex={rowIndex}
79-
// columnId={columnId}
79+
// columnIndex={columnIndex}
8080
// getValue={getValue}
8181
// editRowIndex={editRowIndex}
82-
// editColumnId={editColumnId}
82+
// editColumnIndex={editColumnIndex}
8383
// cellEditMap={cellEditMap}
8484
// ></EditableCell>
8585
// );
8686

8787
// const EditableCell: FC<EditableCellProps> = (props) => {
8888
// const {
8989
// rowIndex,
90-
// columnId,
90+
// columnIndex,
9191
// getValue,
9292
// editRowIndex,
93-
// editColumnId,
93+
// editColumnIndex,
9494
// cellEditMap,
9595
// } = props;
9696

@@ -111,42 +111,42 @@ export const TableBodyCell: FC<TableBodyCellProps> = ({
111111

112112
const [cellState, setCellState] = useState<CellState>(CellState.Ready);
113113

114-
const editable = editRowIndex === rowIndex && editColumnId === columnId;
114+
const editable = editRowIndex === rowIndex && editColumnIndex === columnIndex;
115115
if (editable) {
116116
setCellState(CellState.Editing);
117117
}
118-
const hasUpdated = cellEditMap.has(`[${rowIndex}, ${columnId}]`);
119-
if (editable) {
120-
if (hasUpdated) {
121-
console.log("Has updated!", rowIndex, columnId, cellEditMap);
122-
}
123-
}
118+
const hasUpdated = cellEditMap.has(`[${rowIndex}, ${columnIndex}]`);
119+
// if (editable) {
120+
// if (hasUpdated) {
121+
// console.log("Has updated!", rowIndex, columnIndex, cellEditMap);
122+
// }
123+
// }
124124

125125
// useEffect(() => {
126126
// if (editable) {
127127
// console.log(
128128
// "cell background color: ",
129129
// cellBackground,
130130
// rowIndex,
131-
// columnId
131+
// columnIndex
132132
// );
133133
// }
134-
// }, [cellBackground, editable, rowIndex, columnId]);
134+
// }, [cellBackground, editable, rowIndex, columnIndex]);
135135

136136
// useEffect(() => {
137137

138138
// setCellState(CellState.Ready);
139-
// }, [cellEditMap, rowIndex, columnId]);
140-
useEffect(() => {
141-
if (!editable) return;
142-
console.log(
143-
"Cell map:",
144-
rowIndex,
145-
columnId,
146-
cellEditMap,
147-
cellEditMap.has(`[${rowIndex}, ${columnId}]`)
148-
);
149-
}, [cellEditMap, rowIndex, editable, columnId]);
139+
// }, [cellEditMap, rowIndex, columnIndex]);
140+
// useEffect(() => {
141+
// if (!editable) return;
142+
// console.log(
143+
// "Cell map:",
144+
// rowIndex,
145+
// columnIndex,
146+
// cellEditMap,
147+
// cellEditMap.has(`[${rowIndex}, ${columnIndex}]`)
148+
// );
149+
// }, [cellEditMap, rowIndex, editable, columnIndex]);
150150

151151
// useEffect(() => {
152152
// if (editable) {
@@ -189,16 +189,16 @@ export const TableBodyCell: FC<TableBodyCellProps> = ({
189189

190190
const tableCellClass = tableCellMap[cellState];
191191

192-
useEffect(() => {
193-
console.log("Cell background:", tableCellClass, rowIndex, columnId);
194-
}, [tableCellClass, rowIndex, columnId]);
195-
useEffect(() => {
196-
console.log("Cell state:", cellState, hasUpdated);
197-
}, [hasUpdated, cellState]);
192+
// useEffect(() => {
193+
// console.log("Cell background:", tableCellClass, rowIndex, columnIndex);
194+
// }, [tableCellClass, rowIndex, columnIndex]);
195+
// useEffect(() => {
196+
// console.log("Cell state:", cellState, hasUpdated);
197+
// }, [hasUpdated, cellState]);
198198

199199
function resetEditInfo() {
200200
setEditRowIndex(null);
201-
setEditColumnId(null);
201+
setEditColumnIndex(null);
202202
}
203203

204204
const onEsc = (e: ReactKeyboardEvent<HTMLInputElement>) => {
@@ -217,14 +217,13 @@ export const TableBodyCell: FC<TableBodyCellProps> = ({
217217

218218
const hasShift = e.shiftKey;
219219

220-
const newColumnIndex = columns.indexOf(editColumnId) + (hasShift ? -1 : 1);
220+
const newColumnIndex = editColumnIndex + (hasShift ? -1 : 1);
221221
if (newColumnIndex < 0 || newColumnIndex >= columns.length) {
222222
// If the new column index is out of bounds, quit
223223
return;
224224
}
225-
const newColumnId = columns[newColumnIndex];
226225

227-
setEditColumnId(newColumnId);
226+
setEditColumnIndex(newColumnIndex);
228227
};
229228
const onEnter = (e: ReactKeyboardEvent<HTMLInputElement>) => {
230229
if (e.key !== "Enter") return;
@@ -233,9 +232,12 @@ export const TableBodyCell: FC<TableBodyCellProps> = ({
233232

234233
const hasShift = e.shiftKey;
235234

235+
console.log(maxRowSize);
236+
236237
const newRowIndex = editRowIndex + (hasShift ? -1 : 1);
237238
if (newRowIndex < 0 || newRowIndex >= maxRowSize) {
238239
// If the new row index is out of bounds, quit
240+
// attemptUpdate();
239241
return;
240242
}
241243

@@ -246,10 +248,7 @@ export const TableBodyCell: FC<TableBodyCellProps> = ({
246248
[onEsc, onEnter, onTab].forEach((fn) => fn(e));
247249
};
248250

249-
// When the input is blurred, we'll call our table meta's updateData function
250-
// console.log("rendering cell", rowIndex, id, initialValue, value);
251-
const onBlur = () => {
252-
// console.log("on blur!", initialValue, value, e);
251+
const attemptUpdate = () => {
253252
// Only update if the string form of the value has changed
254253
if (`${initialValue}` !== `${value}`) {
255254
setCellState(CellState.EditSaving);
@@ -260,17 +259,18 @@ export const TableBodyCell: FC<TableBodyCellProps> = ({
260259
cellInfos: [
261260
{
262261
rowIndex,
263-
columnId,
262+
columnIndex,
264263
value,
265264
prev: initialValue,
266265
},
267266
],
268267
onSuccess: (values) => {
269-
console.log("success!", values);
268+
// console.log("success!", values);
270269
setCellState(CellState.EditSuccess);
271270
},
272271
onError: (err) => {
273-
console.log("error!", err);
272+
// console.log("error!", err);
273+
console.error("Error saving tabel cell value!", err);
274274
setCellState(CellState.EditFailure);
275275
},
276276
columns,
@@ -280,6 +280,13 @@ export const TableBodyCell: FC<TableBodyCellProps> = ({
280280
}
281281
};
282282

283+
// When the input is blurred, we'll call our table meta's updateData function
284+
// console.log("rendering cell", rowIndex, id, initialValue, value);
285+
const onBlur = () => {
286+
// console.log("on blur!", initialValue, value, e);
287+
attemptUpdate();
288+
};
289+
283290
// If the initialValue is changed external, sync it up with our state
284291
useEffect(() => {
285292
setValue(initialValue);
@@ -343,7 +350,7 @@ export const TableBodyCell: FC<TableBodyCellProps> = ({
343350
onClick = (e: ReactMouseEvent<HTMLTableCellElement>) => {
344351
console.log("on ready click!", e.target);
345352
setEditRowIndex(rowIndex);
346-
setEditColumnId(columnId);
353+
setEditColumnIndex(columnIndex);
347354
};
348355
if (cellState === CellState.EditFailure) {
349356
console.log("Render edit failure");

‎js/dataframe/data-update.tsx‎

Lines changed: 24 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,26 @@ import { CellState } from "./cell";
44

55
export type UpdateCellData = {
66
rowIndex: number;
7-
columnId: string;
7+
columnIndex: number;
88
value: unknown;
99
prev: unknown;
1010
};
1111
export type UpdateCellDataRequest = {
1212
row_index: number;
13-
column_id: string;
13+
column_index: number;
1414
value: unknown;
1515
prev: unknown;
1616
};
1717

18-
export function updateCellsData(props: {
18+
export function updateCellsData({
19+
id,
20+
cellInfos,
21+
onSuccess,
22+
onError,
23+
columns,
24+
setData,
25+
setCellEditMap,
26+
}: {
1927
id: string;
2028
cellInfos: UpdateCellData[];
2129
onSuccess: (values: ResponseValue[]) => void;
@@ -26,29 +34,18 @@ export function updateCellsData(props: {
2634
fn: (draft: Map<string, { value: string; state: CellState }>) => void
2735
) => void;
2836
}) {
29-
const {
30-
id,
31-
cellInfos,
32-
onSuccess,
33-
onError,
34-
columns,
35-
setData,
36-
setCellEditMap,
37-
} = props;
3837
// // Skip page index reset until after next rerender
3938
// skipAutoResetPageIndex();
4039

4140
const updateInfos: UpdateCellDataRequest[] = cellInfos.map((cellInfo) => {
4241
return {
4342
row_index: cellInfo.rowIndex,
44-
column_id: cellInfo.columnId,
43+
column_index: cellInfo.columnIndex,
4544
value: cellInfo.value,
4645
prev: cellInfo.prev,
4746
};
4847
});
4948

50-
console.log("Set data here! (Send info back to shiny)", cellInfos);
51-
5249
makeRequest(
5350
"outputRPC",
5451
[
@@ -60,39 +57,36 @@ export function updateCellsData(props: {
6057
updateInfos,
6158
],
6259
(values: ResponseValue[]) => {
63-
// console.log("cellsUpdate - success!", values);
6460
setData((draft) => {
6561
values.forEach((value: string, i: number) => {
66-
const { rowIndex, columnId } = cellInfos[i];
67-
const colIndex = columns.indexOf(columnId);
68-
const row = draft[rowIndex];
69-
// console.log(
70-
// "Setting new value!",
71-
// value,
72-
// columnId,
73-
// draft[rowIndex]
74-
// );
62+
const { rowIndex, columnIndex } = cellInfos[i];
63+
// const row = draft[rowIndex];
64+
// // console.log(
65+
// // "Setting new value!",
66+
// // value,
67+
// // columnId,
68+
// // draft[rowIndex]
69+
// // );
7570

76-
draft[rowIndex][colIndex] = value;
71+
draft[rowIndex][columnIndex] = value;
7772
});
7873
});
7974
setCellEditMap((draft) => {
8075
values.forEach((value: string, i: number) => {
81-
const { rowIndex, columnId } = cellInfos[i];
82-
const key = `[${rowIndex}, ${columnId}]`;
76+
const { rowIndex, columnIndex } = cellInfos[i];
77+
const key = `[${rowIndex}, ${columnIndex}]`;
8378

8479
const obj =
8580
draft.get(key) ?? ({} as { value: string; state: CellState });
8681
obj.value = value;
8782
obj.state = CellState.EditSuccess;
88-
console.log("Setting cell edit map");
83+
// console.log("Setting cell edit map");
8984
draft.set(key, obj);
9085
});
9186
});
9287
onSuccess(values);
9388
},
9489
(err: string) => {
95-
console.error("error!", err);
9690
onError(err);
9791
},
9892
undefined

0 commit comments

Comments
 (0)