mirror/chartdb
1
0
Fork 0
mirror of https://github.com/chartdb/chartdb.git synced 2026-01-06 03:39:57 -06:00
Code Issues Packages Projects Releases Wiki Activity

fix: dbml diff fields types preview (#934)

Browse Source
This commit is contained in:
Guy Ben-Aharon
2025-09-28 17:02:56 +03:00
committed by GitHub
parent c9ac8929c5
commit bb033091b1
5 changed files with 124 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/context/chartdb-context/chartdb-provider.tsx
View File

@@ -74,10 +74,10 @@ export const ChartDBProvider: React.FC<
useState<string>();
const diffCalculatedHandler = useCallback((event: DiffCalculatedEvent) => {
const { tablesAdded, fieldsAdded, relationshipsAdded } = event.data;
const { tablesToAdd, fieldsToAdd, relationshipsToAdd } = event.data;
setTables((tables) =>
[...tables, ...(tablesAdded ?? [])].map((table) => {
const fields = fieldsAdded.get(table.id);
[...tables, ...(tablesToAdd ?? [])].map((table) => {
const fields = fieldsToAdd.get(table.id);
return fields
? { ...table, fields: [...table.fields, ...fields] }
: table;
@@ -85,7 +85,7 @@ export const ChartDBProvider: React.FC<
);
setRelationships((relationships) => [
...relationships,
...(relationshipsAdded ?? []),
...(relationshipsToAdd ?? []),
]);
}, []);

56
src/context/diff-context/diff-context.tsx
View File

@@ -15,9 +15,9 @@ export type DiffEventBase<T extends DiffEventType, D> = {
};
export type DiffCalculatedData = {
tablesAdded: DBTable[];
fieldsAdded: Map<string, DBField[]>;
relationshipsAdded: DBRelationship[];
tablesToAdd: DBTable[];
fieldsToAdd: Map<string, DBField[]>;
relationshipsToAdd: DBRelationship[];
};
export type DiffCalculatedEvent = DiffEventBase<
@@ -44,15 +44,21 @@ export interface DiffContext {
options?: {
summaryOnly?: boolean;
};
}) => void;
}) => { foundDiff: boolean };
resetDiff: () => void;
// table diff
checkIfTableHasChange: ({ tableId }: { tableId: string }) => boolean;
checkIfNewTable: ({ tableId }: { tableId: string }) => boolean;
checkIfTableRemoved: ({ tableId }: { tableId: string }) => boolean;
getTableNewName: ({ tableId }: { tableId: string }) => string | null;
getTableNewColor: ({ tableId }: { tableId: string }) => string | null;
getTableNewName: ({ tableId }: { tableId: string }) => {
old: string;
new: string;
} | null;
getTableNewColor: ({ tableId }: { tableId: string }) => {
old: string;
new: string;
} | null;
// field diff
checkIfFieldHasChange: ({
@@ -64,17 +70,41 @@ export interface DiffContext {
}) => boolean;
checkIfFieldRemoved: ({ fieldId }: { fieldId: string }) => boolean;
checkIfNewField: ({ fieldId }: { fieldId: string }) => boolean;
getFieldNewName: ({ fieldId }: { fieldId: string }) => string | null;
getFieldNewType: ({ fieldId }: { fieldId: string }) => DataType | null;
getFieldNewPrimaryKey: ({ fieldId }: { fieldId: string }) => boolean | null;
getFieldNewNullable: ({ fieldId }: { fieldId: string }) => boolean | null;
getFieldNewName: ({
fieldId,
}: {
fieldId: string;
}) => { old: string; new: string } | null;
getFieldNewType: ({
fieldId,
}: {
fieldId: string;
}) => { old: DataType; new: DataType } | null;
getFieldNewPrimaryKey: ({
fieldId,
}: {
fieldId: string;
}) => { old: boolean; new: boolean } | null;
getFieldNewNullable: ({
fieldId,
}: {
fieldId: string;
}) => { old: boolean; new: boolean } | null;
getFieldNewCharacterMaximumLength: ({
fieldId,
}: {
fieldId: string;
}) => string | null;
getFieldNewScale: ({ fieldId }: { fieldId: string }) => number | null;
getFieldNewPrecision: ({ fieldId }: { fieldId: string }) => number | null;
}) => { old: string; new: string } | null;
getFieldNewScale: ({
fieldId,
}: {
fieldId: string;
}) => { old: number; new: number } | null;
getFieldNewPrecision: ({
fieldId,
}: {
fieldId: string;
}) => { old: number; new: number } | null;
// relationship diff
checkIfNewRelationship: ({

59
src/context/diff-context/diff-provider.tsx
View File

@@ -36,7 +36,7 @@ export const DiffProvider: React.FC<React.PropsWithChildren> = ({
const events = useEventEmitter<DiffEvent>();
const generateNewFieldsMap = useCallback(
const generateFieldsToAddMap = useCallback(
({
diffMap,
newDiagram,
@@ -66,7 +66,7 @@ export const DiffProvider: React.FC<React.PropsWithChildren> = ({
[]
);
const findNewRelationships = useCallback(
const findRelationshipsToAdd = useCallback(
({
diffMap,
newDiagram,
@@ -101,7 +101,7 @@ export const DiffProvider: React.FC<React.PropsWithChildren> = ({
diffMap: DiffMap;
}): DiffCalculatedData => {
return {
tablesAdded:
tablesToAdd:
newDiagram?.tables?.filter((table) => {
const tableKey = getDiffMapKey({
diffObject: 'table',
@@ -114,17 +114,17 @@ export const DiffProvider: React.FC<React.PropsWithChildren> = ({
);
}) ?? [],
fieldsAdded: generateNewFieldsMap({
fieldsToAdd: generateFieldsToAddMap({
diffMap: diffMap,
newDiagram: newDiagram,
}),
relationshipsAdded: findNewRelationships({
relationshipsToAdd: findRelationshipsToAdd({
diffMap: diffMap,
newDiagram: newDiagram,
}),
};
},
[findNewRelationships, generateNewFieldsMap]
[findRelationshipsToAdd, generateFieldsToAddMap]
);
const calculateDiff: DiffContext['calculateDiff'] = useCallback(
@@ -149,6 +149,8 @@ export const DiffProvider: React.FC<React.PropsWithChildren> = ({
newDiagram: newDiagramArg,
}),
});
return { foundDiff: !!newDiffs.size };
},
[setDiffMap, events, generateDiffCalculatedData]
);
@@ -165,7 +167,10 @@ export const DiffProvider: React.FC<React.PropsWithChildren> = ({
const diff = diffMap.get(tableNameKey);
if (diff?.type === 'changed') {
return diff.newValue as string;
return {
new: diff.newValue as string,
old: diff.oldValue as string,
};
}
}
@@ -186,7 +191,10 @@ export const DiffProvider: React.FC<React.PropsWithChildren> = ({
const diff = diffMap.get(tableColorKey);
if (diff?.type === 'changed') {
return diff.newValue as string;
return {
new: diff.newValue as string,
old: diff.oldValue as string,
};
}
}
return null;
@@ -277,7 +285,10 @@ export const DiffProvider: React.FC<React.PropsWithChildren> = ({
const diff = diffMap.get(fieldKey);
if (diff?.type === 'changed') {
return diff.newValue as string;
return {
old: diff.oldValue as string,
new: diff.newValue as string,
};
}
}
@@ -298,7 +309,10 @@ export const DiffProvider: React.FC<React.PropsWithChildren> = ({
const diff = diffMap.get(fieldKey);
if (diff?.type === 'changed') {
return diff.newValue as DataType;
return {
old: diff.oldValue as DataType,
new: diff.newValue as DataType,
};
}
}
@@ -321,7 +335,10 @@ export const DiffProvider: React.FC<React.PropsWithChildren> = ({
const diff = diffMap.get(fieldKey);
if (diff?.type === 'changed') {
return diff.newValue as boolean;
return {
old: diff.oldValue as boolean,
new: diff.newValue as boolean,
};
}
}
@@ -342,7 +359,10 @@ export const DiffProvider: React.FC<React.PropsWithChildren> = ({
const diff = diffMap.get(fieldKey);
if (diff?.type === 'changed') {
return diff.newValue as boolean;
return {
old: diff.oldValue as boolean,
new: diff.newValue as boolean,
};
}
}
@@ -365,7 +385,10 @@ export const DiffProvider: React.FC<React.PropsWithChildren> = ({
const diff = diffMap.get(fieldKey);
if (diff?.type === 'changed') {
return diff.newValue as string;
return {
old: diff.oldValue as string,
new: diff.newValue as string,
};
}
}
@@ -386,7 +409,10 @@ export const DiffProvider: React.FC<React.PropsWithChildren> = ({
const diff = diffMap.get(fieldKey);
if (diff?.type === 'changed') {
return diff.newValue as number;
return {
old: diff.oldValue as number,
new: diff.newValue as number,
};
}
}
@@ -409,7 +435,10 @@ export const DiffProvider: React.FC<React.PropsWithChildren> = ({
const diff = diffMap.get(fieldKey);
if (diff?.type === 'changed') {
return diff.newValue as number;
return {
old: diff.oldValue as number,
new: diff.newValue as number,
};
}
}

49
src/pages/editor-page/canvas/table-node/table-node-field.tsx
View File

@@ -159,13 +159,17 @@ export const TableNodeField: React.FC<TableNodeFieldProps> = React.memo(
const [diffState, setDiffState] = useState<{
isDiffFieldRemoved: boolean;
isDiffNewField: boolean;
fieldDiffChangedName: string | null;
fieldDiffChangedType: DBField['type'] | null;
fieldDiffChangedNullable: boolean | null;
fieldDiffChangedCharacterMaximumLength: string | null;
fieldDiffChangedScale: number | null;
fieldDiffChangedPrecision: number | null;
fieldDiffChangedPrimaryKey: boolean | null;
fieldDiffChangedName: ReturnType<typeof getFieldNewName>;
fieldDiffChangedType: ReturnType<typeof getFieldNewType>;
fieldDiffChangedNullable: ReturnType<typeof getFieldNewNullable>;
fieldDiffChangedCharacterMaximumLength: ReturnType<
typeof getFieldNewCharacterMaximumLength
>;
fieldDiffChangedScale: ReturnType<typeof getFieldNewScale>;
fieldDiffChangedPrecision: ReturnType<typeof getFieldNewPrecision>;
fieldDiffChangedPrimaryKey: ReturnType<
typeof getFieldNewPrimaryKey
>;
isDiffFieldChanged: boolean;
}>({
isDiffFieldRemoved: false,
@@ -368,9 +372,9 @@ export const TableNodeField: React.FC<TableNodeFieldProps> = React.memo(
>
{fieldDiffChangedName ? (
<>
{field.name}{' '}
{fieldDiffChangedName.old}{' '}
<span className="font-medium">→</span>{' '}
{fieldDiffChangedName}
{fieldDiffChangedName.new}
</>
) : (
field.name
@@ -389,9 +393,8 @@ export const TableNodeField: React.FC<TableNodeFieldProps> = React.memo(
</div>
<div className="ml-2 flex shrink-0 items-center justify-end gap-1.5">
{(field.primaryKey &&
fieldDiffChangedPrimaryKey === null) ||
fieldDiffChangedPrimaryKey ? (
{(field.primaryKey && !fieldDiffChangedPrimaryKey?.old) ||
fieldDiffChangedPrimaryKey?.new ? (
<div
className={cn(
'text-muted-foreground',
@@ -437,9 +440,17 @@ export const TableNodeField: React.FC<TableNodeFieldProps> = React.memo(
{fieldDiffChangedType ? (
<>
<span className="line-through">
{field.type.name.split(' ')[0]}
{
fieldDiffChangedType.old.name.split(
' '
)[0]
}
</span>{' '}
{fieldDiffChangedType.name.split(' ')[0]}
{
fieldDiffChangedType.new.name.split(
' '
)[0]
}
</>
) : (
`${field.type.name.split(' ')[0]}${
@@ -448,21 +459,21 @@ export const TableNodeField: React.FC<TableNodeFieldProps> = React.memo(
...field,
...{
precision:
fieldDiffChangedPrecision ??
fieldDiffChangedPrecision?.new ??
field.precision,
scale:
fieldDiffChangedScale ??
fieldDiffChangedScale?.new ??
field.scale,
characterMaximumLength:
fieldDiffChangedCharacterMaximumLength ??
fieldDiffChangedCharacterMaximumLength?.new ??
field.characterMaximumLength,
},
})
: ''
}`
)}
{fieldDiffChangedNullable !== null ? (
fieldDiffChangedNullable ? (
{fieldDiffChangedNullable ? (
fieldDiffChangedNullable.new ? (
<span className="font-semibold">?</span>
) : (
<span className="line-through">?</span>

6
src/pages/editor-page/canvas/table-node/table-node.tsx
View File

@@ -138,7 +138,7 @@ export const TableNode: React.FC<NodeProps<TableNodeType>> = React.memo(
);
const tableColor = useMemo(() => {
if (tableChangedColor) {
return tableChangedColor;
return tableChangedColor.new;
}
return table.color;
@@ -476,13 +476,13 @@ export const TableNode: React.FC<NodeProps<TableNodeType>> = React.memo(
{tableChangedName ? (
<Label className="flex h-5 items-center justify-center truncate rounded-sm bg-sky-200 px-2 py-0.5 text-sm font-normal text-sky-900 dark:bg-sky-800 dark:text-sky-200">
<span className="truncate">
{table.name}
{tableChangedName.old}
</span>
<span className="mx-1 font-semibold">
→
</span>
<span className="truncate">
{tableChangedName}
{tableChangedName.new}
</span>
</Label>
) : isDiffNewTable ? (