Skip to content

Use framework table schema APIs #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Josmithr merged 10 commits into from
May 28, 2025
Merged

Use framework table schema APIs #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
64d8eae
WIP
Josmithr May 13, 2025
f0dfc33
Merge branch 'update-fluid' into use-framework-apis
Josmithr May 13, 2025
410b876
build: Update deps
Josmithr May 15, 2025
08f1fe2
refactor: Use Fluid table APIs
Josmithr May 16, 2025
eb4a6de
Merge branch 'main' into use-framework-apis
Josmithr May 16, 2025
c537b8b
Merge branch 'main' into use-framework-apis
Josmithr May 16, 2025
efaba9f
Merge branch 'main' into use-framework-apis
Josmithr May 16, 2025
fc1feca
revert: Unneeded change
Josmithr May 16, 2025
59425d5
docs: Remove obsolete TODO
Josmithr May 16, 2025
cd2ac91
build: Update Fluid dependencies
Josmithr May 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
981 changes: 455 additions & 526 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

16 changes: 8 additions & 8 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,19 +28,19 @@
"@azure/msal-browser": "^3.28.0",
"@fluentui/react-components": "^9.61.6",
"@fluentui/react-icons": "^2.0.292",
"@fluidframework/azure-client": "^2.40.0",
"@fluidframework/odsp-client": "^2.40.0",
"@fluidframework/presence": "^2.40.0",
"@fluidframework/telemetry-utils": "^2.40.0",
"@fluidframework/test-runtime-utils": "^2.40.0",
"@fluidframework/azure-client": "^2.41.0",
"@fluidframework/odsp-client": "^2.41.0",
"@fluidframework/presence": "^2.41.0",
"@fluidframework/telemetry-utils": "^2.41.0",
"@fluidframework/test-runtime-utils": "^2.41.0",
"@microsoft/microsoft-graph-client": "^3.0.7",
"@tailwindcss/vite": "^4.0.9",
"@tanstack/react-table": "^8.20.6",
"@tanstack/react-virtual": "^3.13.0",
"@vitejs/plugin-react": "^4.3.4",
"axios": "^1.7.9",
"dotenv": "^16.4.7",
"fluid-framework": "^2.40.0",
"fluid-framework": "^2.41.0",
"hashids": "^2.2.10",
"jsrsasign": "^11.1.0",
"react": "^18.3.1",
Expand All @@ -53,9 +53,9 @@
"devDependencies": {
"@eslint/eslintrc": "^3.2.0",
"@eslint/js": "^9.18.0",
"@fluidframework/azure-local-service": "^2.40.0",
"@fluidframework/azure-local-service": "^2.41.0",
"@fluidframework/build-common": "^2.0.3",
"@fluidframework/devtools": "^2.40.0",
"@fluidframework/devtools": "^2.41.0",
"@microsoft/microsoft-graph-types": "^2.40.0",
"@playwright/test": "^1.49.1",
"@types/debug": "^4.1.7",
Expand Down
39 changes: 22 additions & 17 deletions src/app_load.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { AzureClient } from "@fluidframework/azure-client";
import React from "react";
import { createRoot } from "react-dom/client";
import { ReactApp } from "./react/ux.js";
import { appTreeConfiguration, FluidTable, hintValues } from "./schema/app_schema.js";
import { appTreeConfiguration, Table as FluidTable, hintValues } from "./schema/app_schema.js";
import { createUndoRedoStacks } from "./utils/undo.js";
import { containerSchema } from "./schema/container_schema.js";
import { loadFluidData } from "./infra/fluid.js";
Expand All @@ -29,7 +29,7 @@ export async function loadApp(props: {

// Create an array of rows to be used in the table
const rows = new Array(10).fill(null).map(() => {
return { _cells: [], props: null };
return { cells: {} };
});

// Initialize the SharedTree DDSes
Expand All @@ -40,29 +40,34 @@ export async function loadApp(props: {
rows: rows,
columns: [
{
name: "String",
hint: hintValues.string,
props: null,
props: {
label: "String",
hint: hintValues.string,
},
},
{
name: "Number",
hint: hintValues.number,
props: null,
props: {
label: "Number",
hint: hintValues.number,
},
},
{
name: "Boolean",
hint: hintValues.boolean,
props: null,
props: {
label: "Boolean",
hint: hintValues.boolean,
},
},
{
name: "Date",
hint: hintValues.date,
props: null,
props: {
label: "Date",
hint: hintValues.date,
},
},
{
name: "Vote",
hint: hintValues.vote,
props: null,
props: {
label: "Vote",
hint: hintValues.vote,
},
},
],
}),
Expand Down
124 changes: 68 additions & 56 deletions src/react/buttonux.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@
import React, { JSX, useEffect } from "react";
import {
DateTime,
FluidColumn,
FluidRow,
FluidTable,
TableColumn as FluidColumn,
TableRow as FluidRow,
Table as FluidTable,
HintValues,
hintValues,
} from "../schema/app_schema.js";
Expand Down Expand Up @@ -71,11 +71,12 @@ export function NewEmptyRowButton(props: {
const handleClick = (e: React.MouseEvent) => {
e.stopPropagation();
const lastSelectedRow = getLastSelectedRow(table, selection);
const row = table.createDetachedRow();
const row = new FluidRow({ cells: {} });
if (lastSelectedRow !== undefined) {
table.insertRows({ rows: [row], index: lastSelectedRow.index + 1 });
const lastSelectedRowIndex = props.table.rows.indexOf(lastSelectedRow);
table.insertRow({ row, index: lastSelectedRowIndex + 1 });
} else {
table.insertRows({ rows: [row], index: table.rows.length });
table.insertRow({ row });
}
};
return (
Expand All @@ -101,9 +102,10 @@ export function NewRowButton(props: {
const row = getRowWithValues(props.table);

if (lastSelectedRow !== undefined) {
props.table.insertRows({ index: lastSelectedRow.index + 1, rows: [row] });
const lastSelectedRowIndex = props.table.rows.indexOf(lastSelectedRow);
props.table.insertRow({ row, index: lastSelectedRowIndex + 1 });
} else {
props.table.insertRows({ index: props.table.rows.length, rows: [row] });
props.table.insertRow({ row });
}
});
};
Expand Down Expand Up @@ -142,23 +144,20 @@ export function NewManysRowsButton(props: { table: FluidTable }): JSX.Element {
}

const getRowWithValues = (table: FluidTable): FluidRow => {
const row = table.createDetachedRow();
const row = new FluidRow({ cells: {} });
// Iterate through all the columns and add a random value for the new row
// If the column is a number, we will add a random number, otherwise we will add a random string
// If the column is a boolean, we will add a random boolean
for (const column of table.columns) {
const fluidColumn = table.getColumn(column.id);
const hint = fluidColumn.hint;

switch (hint) {
switch (column.props.hint) {
case hintValues.string:
row.setCell(fluidColumn, Math.random().toString(36).substring(7));
row.setCell(column, Math.random().toString(36).substring(7));
break;
case hintValues.number:
row.setCell(fluidColumn, Math.floor(Math.random() * 1000));
row.setCell(column, Math.floor(Math.random() * 1000));
break;
case hintValues.boolean:
row.setCell(fluidColumn, Math.random() > 0.5);
row.setCell(column, Math.random() > 0.5);
break;
case hintValues.date: {
// Add a random date
Expand All @@ -169,13 +168,13 @@ const getRowWithValues = (table: FluidTable): FluidRow => {
const dateTime = new DateTime({ raw: date.getTime() });
return dateTime;
};
row.setCell(fluidColumn, getDate());
row.setCell(column, getDate());
break;
}
case hintValues.vote:
break;
default: // Add a random string
row.setCell(fluidColumn, Math.random().toString(36).substring(7));
row.setCell(column, Math.random().toString(36).substring(7));
break;
}
}
Expand All @@ -194,43 +193,53 @@ export function NewColumnButton(props: { table: FluidTable }): JSX.Element {
e.stopPropagation();

const index = props.table.columns.length + 1;
const name = `Column ${index.toString()}`;
const label = `Column ${index.toString()}`;

// Add a new column to the table
if (index % 5 === 1) {
table.insertColumn({
name,
hint: hintValues.string,
index: table.columns.length,
props: null,
column: {
props: {
label,
hint: hintValues.string,
},
},
});
} else if (index % 5 === 2) {
table.insertColumn({
name,
hint: hintValues.number,
index: table.columns.length,
props: null,
column: {
props: {
label,
hint: hintValues.number,
},
},
});
} else if (index % 5 === 3) {
table.insertColumn({
name,
hint: hintValues.boolean,
index: table.columns.length,
props: null,
column: {
props: {
label,
hint: hintValues.boolean,
},
},
});
} else if (index % 5 === 4) {
table.insertColumn({
name,
hint: hintValues.vote,
index: table.columns.length,
props: null,
column: {
props: {
label,
hint: hintValues.vote,
},
},
});
} else {
table.insertColumn({
name,
hint: hintValues.date,
index: table.columns.length,
props: null,
column: {
props: {
label,
hint: hintValues.date,
},
},
});
}
};
Expand Down Expand Up @@ -277,10 +286,11 @@ export function MoveSelectedRowsButton(props: {
for (const rowId of selectedRows) {
const row = table.getRow(rowId);
if (row !== undefined && Tree.status(row) === TreeStatus.InDocument) {
const rowIndex = table.rows.indexOf(row);
if (up) {
row.moveTo(row.index - 1);
table.rows.moveToIndex(rowIndex - 1, rowIndex);
} else {
row.moveTo(row.index + 1);
table.rows.moveToIndex(rowIndex + 1, rowIndex);
}
}
}
Expand Down Expand Up @@ -335,9 +345,7 @@ export function MoveSelectedColumnsButton(props: {
if (selectedColumns.length === 0) {
const selectedCells = getSelected(selection, "cell");
if (selectedCells.length > 0) {
const column = table.getColumnByCellId(
selectedCells[0].id as `${string}_${string}`,
);
const column = table.getColumn(selectedCells[0].id);
if (column !== undefined && Tree.status(column) === TreeStatus.InDocument) {
selectedColumns.push({ id: column.id, type: "column" });
}
Expand All @@ -348,10 +356,11 @@ export function MoveSelectedColumnsButton(props: {
for (const c of selectedColumns) {
const column = table.getColumn(c.id);
if (column !== undefined && Tree.status(column) === TreeStatus.InDocument) {
const currentIndex = table.columns.indexOf(column);
if (left) {
column.moveTo(column.index - 1);
table.columns.moveToIndex(currentIndex - 1, currentIndex);
} else {
column.moveTo(column.index + 1);
table.columns.moveToIndex(currentIndex + 1, currentIndex);
}
}
}
Expand Down Expand Up @@ -403,7 +412,7 @@ export function DeleteSelectedRowsButton(props: {
const rowsToDelete = selectedRows
.map((rowId) => table.getRow(rowId))
.filter((row): row is FluidRow => row !== undefined);
table.deleteRows(rowsToDelete);
table.removeRows(rowsToDelete);
// Clear the selection
selection.clearSelection();
};
Expand All @@ -424,7 +433,7 @@ export function ColumnTypeDropdown(props: { column: FluidColumn }): JSX.Element
const { column } = props;

const [checkedValues, setCheckedValues] = React.useState<Record<string, string[]>>({
type: [column.hint ?? ""],
type: [column.props.hint ?? ""],
});
const onChange: MenuProps["onCheckedValueChange"] = (
e: React.MouseEvent,
Expand All @@ -433,7 +442,10 @@ export function ColumnTypeDropdown(props: { column: FluidColumn }): JSX.Element
setCheckedValues((s) => ({ ...s, [name]: checkedItems }));
};

if (column.cells.size !== 0) return <></>;
const cells = [...column.getCells()];
if (cells.length > 0) {
return <></>;
}

return (
<Menu
Expand Down Expand Up @@ -468,22 +480,22 @@ export function ChangeColumnTypeMenuItem(props: {
e.stopPropagation();
switch (type) {
case hintValues.string:
column.hint = hintValues.string;
column.props.hint = hintValues.string;
break;
case hintValues.number:
column.hint = hintValues.number;
column.props.hint = hintValues.number;
break;
case hintValues.boolean:
column.hint = hintValues.boolean;
column.props.hint = hintValues.boolean;
break;
case hintValues.date:
column.hint = hintValues.date;
column.props.hint = hintValues.date;
break;
case hintValues.vote:
column.hint = hintValues.vote;
column.props.hint = hintValues.vote;
break;
default:
column.hint = hintValues.string;
column.props.hint = hintValues.string;
break;
}
};
Expand All @@ -499,7 +511,7 @@ export function ChangeColumnTypeMenuItem(props: {
export function DeleteAllRowsButton(props: { table: FluidTable }): JSX.Element {
const handleClick = (e: React.MouseEvent) => {
e.stopPropagation();
props.table.deleteAllRows();
props.table.removeAllRows();
};
return (
<TooltipButton
Expand Down
2 changes: 1 addition & 1 deletion src/react/canvasux.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
import React, { JSX, useEffect } from "react";
import { ConnectionState, IFluidContainer } from "fluid-framework";

import { FluidTable } from "../schema/app_schema.js";
import { Table as FluidTable } from "../schema/app_schema.js";
import type { SelectionManager } from "../utils/Interfaces/SelectionManager.js";
import { TableView } from "./tableux.js";
import { TableSelection } from "../utils/selection.js";
Expand Down
Loading
Loading