paulmataruso/chartdb
1
0
Fork 0
mirror of https://github.com/chartdb/chartdb.git synced 2025-10-23 07:11:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add toggle to group tables by area or schema in sidebar

Browse Source
This commit is contained in:
johnnyfish
2025-08-01 14:41:01 +03:00
parent 901b1ccd4a
commit d30a735abb
8 changed files with 690 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/context/chartdb-context/chartdb-context.tsx
View File

@@ -285,6 +285,8 @@ export interface ChartDBContext {
hiddenTableIds?: string[];
addHiddenTableId: (tableId: string) => Promise<void>;
removeHiddenTableId: (tableId: string) => Promise<void>;
addHiddenTableIds: (tableIds: string[]) => Promise<void>;
removeHiddenTableIds: (tableIds: string[]) => Promise<void>;
}
export const chartDBContext = createContext<ChartDBContext>({
@@ -386,4 +388,6 @@ export const chartDBContext = createContext<ChartDBContext>({
hiddenTableIds: [],
addHiddenTableId: emptyFn,
removeHiddenTableId: emptyFn,
addHiddenTableIds: emptyFn,
removeHiddenTableIds: emptyFn,
});

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

@@ -162,12 +162,9 @@ export const ChartDBProvider: React.FC<
return schemasFilterFromCache;
}
// Only default to showing schemas if no filter has been set
return [
schemas.find((s) => s.name === defaultSchemaName)?.id ??
schemas[0]?.id,
];
}, [schemasFilter, diagramId, schemas, defaultSchemaName]);
// Default to showing all schemas if no filter has been set
return schemas.map((s) => s.id);
}, [schemasFilter, diagramId, schemas]);
const currentDiagram: Diagram = useMemo(
() => ({
@@ -1751,25 +1748,81 @@ export const ChartDBProvider: React.FC<
const addHiddenTableId: ChartDBContext['addHiddenTableId'] = useCallback(
async (tableId: string) => {
if (!hiddenTableIds.includes(tableId)) {
setHiddenTableIds((prev) => [...prev, tableId]);
await hideTableForDiagram(diagramId, tableId);
}
setHiddenTableIds((prev) => {
if (!prev.includes(tableId)) {
hideTableForDiagram(diagramId, tableId);
return [...prev, tableId];
}
return prev;
});
},
[hiddenTableIds, diagramId, hideTableForDiagram]
[diagramId, hideTableForDiagram]
);
const removeHiddenTableId: ChartDBContext['removeHiddenTableId'] =
useCallback(
async (tableId: string) => {
if (hiddenTableIds.includes(tableId)) {
setHiddenTableIds((prev) =>
prev.filter((id) => id !== tableId)
setHiddenTableIds((prev) => {
if (prev.includes(tableId)) {
unhideTableForDiagram(diagramId, tableId);
return prev.filter((id) => id !== tableId);
}
return prev;
});
},
[diagramId, unhideTableForDiagram]
);
const addHiddenTableIds: ChartDBContext['addHiddenTableIds'] = useCallback(
async (tableIds: string[]) => {
if (tableIds.length === 0) return;
const newIds: string[] = [];
setHiddenTableIds((prev) => {
const toAdd = tableIds.filter((id) => !prev.includes(id));
newIds.push(...toAdd);
if (toAdd.length === 0) return prev;
return [...prev, ...toAdd];
});
// Batch update config for all tables after state update
if (newIds.length > 0) {
await Promise.all(
newIds.map((id) => hideTableForDiagram(diagramId, id))
);
}
},
[diagramId, hideTableForDiagram]
);
const removeHiddenTableIds: ChartDBContext['removeHiddenTableIds'] =
useCallback(
async (tableIds: string[]) => {
if (tableIds.length === 0) return;
const idsToRemove: string[] = [];
setHiddenTableIds((prev) => {
const toRemove = new Set(tableIds);
const filtered = prev.filter((id) => !toRemove.has(id));
if (filtered.length === prev.length) return prev;
// Collect IDs that need to be removed
idsToRemove.push(
...tableIds.filter((id) => prev.includes(id))
);
return filtered;
});
// Batch update config for all tables after state update
if (idsToRemove.length > 0) {
await Promise.all(
idsToRemove.map((id) =>
unhideTableForDiagram(diagramId, id)
)
);
await unhideTableForDiagram(diagramId, tableId);
}
},
[hiddenTableIds, diagramId, unhideTableForDiagram]
[diagramId, unhideTableForDiagram]
);
return (
@@ -1847,6 +1900,8 @@ export const ChartDBProvider: React.FC<
hiddenTableIds,
addHiddenTableId,
removeHiddenTableId,
addHiddenTableIds,
removeHiddenTableIds,
highlightCustomTypeId,
highlightedCustomType,
}}

13
src/i18n/locales/en.ts
View File

@@ -129,6 +129,10 @@ export const en = {
open_filter: 'Open Filter',
show_list: 'Show Table List',
show_dbml: 'Show DBML Editor',
default_grouping: 'Default View',
group_by_schema: 'Group by Schema',
group_by_area: 'Group by Area',
no_area: 'No Area',
table: {
fields: 'Fields',
@@ -264,6 +268,15 @@ export const en = {
},
},
canvas_filter: {
title: 'Filter Tables',
search_placeholder: 'Search tables...',
default_grouping: 'Default View',
group_by_schema: 'Group by Schema',
group_by_area: 'Group by Area',
no_area: 'No Area',
},
toolbar: {
zoom_in: 'Zoom In',
zoom_out: 'Zoom Out',

1
src/pages/editor-page/canvas/area-utils.ts
View File

@@ -56,6 +56,7 @@ export const updateTablesParentAreas = (
areas: Area[]
): DBTable[] => {
return tables.map((table) => {
// Find containing area based on position
const containingArea = findContainingArea(table, areas);
const newParentAreaId = containingArea?.id || null;

460
src/pages/editor-page/canvas/canvas-filter/canvas-filter.tsx
View File

@@ -5,26 +5,37 @@ import React, {
useEffect,
useRef,
} from 'react';
import { X, Search, Eye, EyeOff, Database, Table, Funnel } from 'lucide-react';
import {
X,
Search,
Eye,
EyeOff,
Database,
Table,
Funnel,
Layers,
} from 'lucide-react';
import { useChartDB } from '@/hooks/use-chartdb';
import { useTranslation } from 'react-i18next';
import { Button } from '@/components/button/button';
import { Input } from '@/components/input/input';
import { shouldShowTableSchemaBySchemaFilter } from '@/lib/domain/db-table';
import { schemaNameToSchemaId } from '@/lib/domain/db-schema';
import { databasesWithSchemas } from '@/lib/domain/db-schema';
import { defaultSchemas } from '@/lib/data/default-schemas';
import { useReactFlow } from '@xyflow/react';
import { TreeView } from '@/components/tree-view/tree-view';
import type { TreeNode } from '@/components/tree-view/tree';
import { ScrollArea } from '@/components/scroll-area/scroll-area';
import { ToggleGroup, ToggleGroupItem } from '@/components/toggle/toggle-group';
export interface CanvasFilterProps {
onClose: () => void;
}
type NodeType = 'schema' | 'table';
type NodeType = 'schema' | 'table' | 'area';
type SchemaContext = { name: string };
type AreaContext = { id: string; name: string };
type TableContext = {
tableSchema?: string | null;
hidden: boolean;
@@ -32,6 +43,7 @@ type TableContext = {
type NodeContext = {
schema: SchemaContext;
area: AreaContext;
table: TableContext;
};
@@ -49,14 +61,22 @@ export const CanvasFilter: React.FC<CanvasFilterProps> = ({ onClose }) => {
hiddenTableIds,
addHiddenTableId,
removeHiddenTableId,
addHiddenTableIds,
removeHiddenTableIds,
filteredSchemas,
filterSchemas,
areas,
} = useChartDB();
const { fitView, setNodes } = useReactFlow();
const [searchQuery, setSearchQuery] = useState('');
const [expanded, setExpanded] = useState<Record<string, boolean>>({});
const [isFilterVisible, setIsFilterVisible] = useState(false);
const [groupBy, setGroupBy] = useState<'schema' | 'area'>('schema');
const searchInputRef = useRef<HTMLInputElement>(null);
const supportsSchemas = useMemo(
() => databasesWithSchemas.includes(databaseType),
[databaseType]
);
const hasAreas = useMemo(() => areas.length > 0, [areas]);
// Extract only the properties needed for tree data
const relevantTableData = useMemo<RelevantTableData[]>(
@@ -71,6 +91,179 @@ export const CanvasFilter: React.FC<CanvasFilterProps> = ({ onClose }) => {
// Convert tables to tree nodes
const treeData = useMemo(() => {
if (groupBy === 'area' && hasAreas) {
// Group tables by area
const tablesByArea = new Map<string, RelevantTableData[]>();
const tablesWithoutArea: RelevantTableData[] = [];
// Create a map of area id to area
const areaMap = areas.reduce(
(acc, area) => {
acc[area.id] = area;
return acc;
},
{} as Record<string, (typeof areas)[0]>
);
// Create table lookup map for O(1) access
const tableMap = new Map(tables.map((t) => [t.id, t]));
// Include ALL tables, not just visible ones
relevantTableData.forEach((table) => {
const tableData = tableMap.get(table.id);
// Tables should stay in their areas regardless of visibility
if (
tableData?.parentAreaId &&
areaMap[tableData.parentAreaId]
) {
const areaId = tableData.parentAreaId;
if (!tablesByArea.has(areaId)) {
tablesByArea.set(areaId, []);
}
tablesByArea.get(areaId)!.push(table);
} else {
tablesWithoutArea.push(table);
}
});
// Sort tables within each area
tablesByArea.forEach((tables) => {
tables.sort((a, b) => a.name.localeCompare(b.name));
});
tablesWithoutArea.sort((a, b) => a.name.localeCompare(b.name));
// Convert to tree nodes
const nodes: TreeNode<NodeType, NodeContext>[] = [];
// Sort all areas by order or name (including empty ones)
const sortedAreas = areas.sort((a, b) => {
if (a.order !== undefined && b.order !== undefined) {
return a.order - b.order;
}
return a.name.localeCompare(b.name);
});
sortedAreas.forEach((area) => {
// Get all tables for this area from our mapping
const areaTables = tablesByArea.get(area.id) || [];
// Count all tables that belong to this area (including hidden ones)
const totalTablesInArea = tables.filter(
(t) => t.parentAreaId === area.id
).length;
// Always show the area if it has any tables
if (totalTablesInArea > 0 || areaTables.length > 0) {
// Get ALL tables that belong to this area (not just the visible ones)
const allTablesInThisArea = tables.filter(
(t) => t.parentAreaId === area.id
);
// Check if all tables in this area are hidden
const allTablesInAreaHidden =
allTablesInThisArea.length > 0 &&
allTablesInThisArea.every((table) =>
hiddenTableIds?.includes(table.id)
);
const areaNode: TreeNode<NodeType, NodeContext> = {
id: `area-${area.id}`,
name: `${area.name} (${totalTablesInArea})`,
type: 'area',
isFolder: true,
icon: Layers,
context: { id: area.id, name: area.name },
className: allTablesInAreaHidden ? 'text-gray-400' : '',
children: areaTables.map(
(table): TreeNode<NodeType, NodeContext> => {
const tableHidden =
hiddenTableIds?.includes(table.id) ?? false;
// If the parent area is hidden (all tables hidden), this table should appear gray too
const shouldAppearGray =
tableHidden || allTablesInAreaHidden;
return {
id: table.id,
name: table.name,
type: 'table',
isFolder: false,
icon: Table,
context: {
tableSchema: table.schema,
hidden: tableHidden,
},
className: shouldAppearGray
? 'text-gray-400'
: '',
};
}
),
};
nodes.push(areaNode);
}
});
// Add "No Area" group if there are tables without areas
// Count all tables that don't belong to any area (including hidden ones)
const totalTablesWithoutArea = tables.filter(
(t) => !t.parentAreaId
).length;
if (totalTablesWithoutArea > 0) {
// Get ALL tables without area (not just the visible ones)
const allTablesWithoutAreaList = tables.filter(
(t) => !t.parentAreaId
);
// Check if all tables without area are hidden
const allTablesWithoutAreaHidden =
allTablesWithoutAreaList.length > 0 &&
allTablesWithoutAreaList.every((table) =>
hiddenTableIds?.includes(table.id)
);
const noAreaNode: TreeNode<NodeType, NodeContext> = {
id: 'area-no-area',
name: `${t('canvas_filter.no_area')} (${totalTablesWithoutArea})`,
type: 'area',
isFolder: true,
icon: Layers,
context: {
id: 'no-area',
name: t('canvas_filter.no_area'),
},
className: allTablesWithoutAreaHidden
? 'text-gray-400'
: '',
children: tablesWithoutArea.map(
(table): TreeNode<NodeType, NodeContext> => {
const tableHidden =
hiddenTableIds?.includes(table.id) ?? false;
// If the parent area is hidden (all tables hidden), this table should appear gray too
const shouldAppearGray =
tableHidden || allTablesWithoutAreaHidden;
return {
id: table.id,
name: table.name,
type: 'table',
isFolder: false,
icon: Table,
context: {
tableSchema: table.schema,
hidden: tableHidden,
},
className: shouldAppearGray
? 'text-gray-400'
: '',
};
}
),
};
nodes.push(noAreaNode);
}
return nodes;
}
// Default schema grouping
// Group tables by schema
const tablesBySchema = new Map<string, RelevantTableData[]>();
@@ -92,19 +285,11 @@ export const CanvasFilter: React.FC<CanvasFilterProps> = ({ onClose }) => {
const nodes: TreeNode<NodeType, NodeContext>[] = [];
tablesBySchema.forEach((schemaTables, schemaName) => {
const schemaId = schemaNameToSchemaId(schemaName);
const schemaFilteredOut = filteredSchemas
? !filteredSchemas.includes(schemaId)
: false;
// Pre-calculate if all tables in this schema are hidden
const allTablesHidden = schemaTables.every(
(table) => hiddenTableIds?.includes(table.id) ?? false
);
// Schema appears hidden if filtered out OR all tables are hidden
const schemaHidden = schemaFilteredOut || allTablesHidden;
const schemaNode: TreeNode<NodeType, NodeContext> = {
id: `schema-${schemaName}`,
name: `${schemaName} (${schemaTables.length})`,
@@ -112,18 +297,11 @@ export const CanvasFilter: React.FC<CanvasFilterProps> = ({ onClose }) => {
isFolder: true,
icon: Database,
context: { name: schemaName },
className: schemaHidden ? 'opacity-50' : '',
className: allTablesHidden ? 'text-gray-400' : '',
children: schemaTables.map(
(table): TreeNode<NodeType, NodeContext> => {
const tableHidden =
hiddenTableIds?.includes(table.id) ?? false;
const visibleBySchema =
shouldShowTableSchemaBySchemaFilter({
tableSchema: table.schema,
filteredSchemas,
});
const hidden = tableHidden || !visibleBySchema;
return {
id: table.id,
name: table.name,
@@ -134,7 +312,7 @@ export const CanvasFilter: React.FC<CanvasFilterProps> = ({ onClose }) => {
tableSchema: table.schema,
hidden: tableHidden,
},
className: hidden ? 'opacity-50' : '',
className: tableHidden ? 'opacity-50' : '',
};
}
),
@@ -143,9 +321,18 @@ export const CanvasFilter: React.FC<CanvasFilterProps> = ({ onClose }) => {
});
return nodes;
}, [relevantTableData, databaseType, hiddenTableIds, filteredSchemas]);
}, [
relevantTableData,
databaseType,
hiddenTableIds,
groupBy,
hasAreas,
areas,
tables,
t,
]);
// Initialize expanded state - collapse if multiple schemas, expand if single schema
// Initialize expanded state - collapse if multiple schemas, expand if single schema (when grouping changes)
useEffect(() => {
setExpanded((prevExpanded) => {
const hasMultipleSchemas = treeData.length > 1;
@@ -163,7 +350,7 @@ export const CanvasFilter: React.FC<CanvasFilterProps> = ({ onClose }) => {
return newExpanded;
});
}, [treeData]);
}, [groupBy, treeData]);
// Filter tree data based on search query
const filteredTreeData: TreeNode<NodeType, NodeContext>[] = useMemo(() => {
@@ -239,58 +426,82 @@ export const CanvasFilter: React.FC<CanvasFilterProps> = ({ onClose }) => {
// Render component that's always visible (eye indicator)
const renderActions = useCallback(
(node: TreeNode<NodeType, NodeContext>) => {
if (node.type === 'schema') {
const schemaContext = node.context as SchemaContext;
const schemaId = schemaNameToSchemaId(schemaContext.name);
const schemaFilteredOut = filteredSchemas
? !filteredSchemas.includes(schemaId)
: false;
if (node.type === 'area') {
const areaContext = node.context as AreaContext;
const areaId = areaContext.id;
// Check if all tables in this schema are hidden
const allTablesHidden =
node.children?.every((child) =>
hiddenTableIds?.includes(child.id)
) ?? false;
// Find all tables that belong to this area (not just the visible ones)
const allTablesInArea =
areaId === 'no-area'
? tables.filter((table) => !table.parentAreaId)
: tables.filter(
(table) => table.parentAreaId === areaId
);
// Schema is "hidden" if filtered out OR all tables are hidden
const schemaHidden = schemaFilteredOut || allTablesHidden;
// Check if all tables in this area are hidden - use current state
const allHidden =
allTablesInArea.length > 0 &&
allTablesInArea.every((table) =>
hiddenTableIds?.includes(table.id)
);
return (
<Button
variant="ghost"
size="sm"
className="size-7 h-fit p-0"
onClick={(e) => {
disabled={allTablesInArea.length === 0}
onClick={async (e) => {
e.stopPropagation();
if (schemaHidden) {
// Show the schema in filter
if (schemaFilteredOut) {
filterSchemas([
...(filteredSchemas ?? []),
schemaId,
]);
}
// Unhide all tables in this schema
node.children?.forEach((child) => {
if (
child.type === 'table' &&
hiddenTableIds?.includes(child.id)
) {
removeHiddenTableId(child.id);
}
});
// Toggle all tables in this area using bulk operations
const tableIds = allTablesInArea.map(
(table) => table.id
);
if (allHidden) {
await removeHiddenTableIds(tableIds);
} else {
// Hide the schema and all its tables
filterSchemas(
filteredSchemas?.filter(
(s) => s !== schemaId
) ?? []
);
await addHiddenTableIds(tableIds);
}
}}
>
{schemaHidden ? (
{allHidden ? (
<EyeOff className="size-3.5 text-muted-foreground" />
) : (
<Eye className="size-3.5" />
)}
</Button>
);
}
if (node.type === 'schema') {
// Get all table IDs in this schema
const schemaTableIds =
node.children?.map((child) => child.id) || [];
// Check if all tables in this schema are hidden
const allTablesHidden =
schemaTableIds.length > 0 &&
schemaTableIds.every((id) => hiddenTableIds?.includes(id));
return (
<Button
variant="ghost"
size="sm"
className="size-7 h-fit p-0"
disabled={schemaTableIds.length === 0}
onClick={async (e) => {
e.stopPropagation();
if (allTablesHidden) {
// Show all tables in this schema
await removeHiddenTableIds(schemaTableIds);
} else {
// Hide all tables in this schema
await addHiddenTableIds(schemaTableIds);
}
}}
>
{allTablesHidden ? (
<EyeOff className="size-3.5 text-muted-foreground" />
) : (
<Eye className="size-3.5" />
@@ -302,9 +513,12 @@ export const CanvasFilter: React.FC<CanvasFilterProps> = ({ onClose }) => {
if (node.type === 'table') {
const tableId = node.id;
const tableContext = node.context as TableContext;
const hidden = tableContext.hidden;
const tableSchema = tableContext.tableSchema;
// Always use the current state directly
const isCurrentlyHidden =
hiddenTableIds?.includes(tableId) ?? false;
const visibleBySchema = shouldShowTableSchemaBySchemaFilter({
tableSchema,
filteredSchemas,
@@ -315,70 +529,17 @@ export const CanvasFilter: React.FC<CanvasFilterProps> = ({ onClose }) => {
variant="ghost"
size="sm"
className="size-7 h-fit p-0"
onClick={(e) => {
onClick={async (e) => {
e.stopPropagation();
if (!visibleBySchema && tableSchema) {
// Unhide schema and hide all other tables
const schemaId =
schemaNameToSchemaId(tableSchema);
filterSchemas([
...(filteredSchemas ?? []),
schemaId,
]);
const schemaNode = treeData.find(
(s) =>
(s.context as SchemaContext).name ===
tableSchema
);
if (schemaNode) {
schemaNode.children?.forEach((child) => {
if (
child.id !== tableId &&
!hiddenTableIds?.includes(child.id)
) {
addHiddenTableId(child.id);
}
});
}
} else {
toggleTableVisibility(tableId, !hidden);
// Check if this was the last visible table in the schema
if (!hidden && tableSchema) {
const schemaNode = treeData.find(
(s) =>
(s.context as SchemaContext)
.name === tableSchema
);
if (schemaNode) {
// Check if all other tables in this schema will be hidden
const willAllBeHidden =
schemaNode.children?.every(
(child) =>
child.id === tableId ||
hiddenTableIds?.includes(
child.id
)
) ?? false;
if (willAllBeHidden) {
// Hide the schema as well
const schemaId =
schemaNameToSchemaId(
tableSchema
);
filterSchemas(
filteredSchemas?.filter(
(s) => s !== schemaId
) ?? []
);
}
}
}
}
// Simply toggle the table visibility using current state
await toggleTableVisibility(
tableId,
!isCurrentlyHidden
);
}}
disabled={groupBy === 'schema' && !visibleBySchema}
>
{hidden || !visibleBySchema ? (
{isCurrentlyHidden ? (
<EyeOff className="size-3.5 text-muted-foreground" />
) : (
<Eye className="size-3.5" />
@@ -392,19 +553,19 @@ export const CanvasFilter: React.FC<CanvasFilterProps> = ({ onClose }) => {
[
toggleTableVisibility,
filteredSchemas,
filterSchemas,
treeData,
hiddenTableIds,
addHiddenTableId,
removeHiddenTableId,
addHiddenTableIds,
removeHiddenTableIds,
tables,
groupBy,
]
);
// Handle node click
const handleNodeClick = useCallback(
(node: TreeNode<NodeType, NodeContext>) => {
if (node.type === 'schema') {
// Toggle schema expansion on single click
if (node.type === 'schema' || node.type === 'area') {
// Toggle schema/area expansion on single click
setExpanded((prev) => ({
...prev,
[node.id]: !prev[node.id],
@@ -476,11 +637,48 @@ export const CanvasFilter: React.FC<CanvasFilterProps> = ({ onClose }) => {
className="h-full pl-9"
/>
</div>
{hasAreas && (
<div className="mt-2">
<ToggleGroup
type="single"
value={groupBy}
onValueChange={(value) => {
if (value)
setGroupBy(value as 'schema' | 'area');
}}
className="w-full justify-start"
>
<ToggleGroupItem
value="schema"
aria-label={
supportsSchemas
? 'Group by schema'
: 'Default'
}
className="h-8 flex-1 gap-1.5 text-xs"
>
<Database className="size-3.5" />
{supportsSchemas
? t('canvas_filter.group_by_schema')
: t('canvas_filter.default_grouping')}
</ToggleGroupItem>
<ToggleGroupItem
value="area"
aria-label="Group by area"
className="h-8 flex-1 gap-1.5 text-xs"
>
<Layers className="size-3.5" />
{t('canvas_filter.group_by_area')}
</ToggleGroupItem>
</ToggleGroup>
</div>
)}
</div>
{/* Table Tree */}
<ScrollArea className="flex-1 rounded-b-lg" type="auto">
<TreeView
key={`tree-${groupBy}-${JSON.stringify(hiddenTableIds?.sort() || [])}`}
data={filteredTreeData}
onNodeClick={handleNodeClick}
renderActionsComponent={renderActions}

60
src/pages/editor-page/canvas/canvas.tsx
View File

@@ -144,15 +144,48 @@ const tableToTableNode = (
};
};
const areaToAreaNode = (area: Area): AreaNodeType => ({
id: area.id,
type: 'area',
position: { x: area.x, y: area.y },
data: { area },
width: area.width,
height: area.height,
zIndex: -10,
});
const areaToAreaNode = (
area: Area,
tables: DBTable[],
hiddenTableIds?: string[],
filteredSchemas?: string[]
): AreaNodeType => {
// Check if all tables in this area are hidden
const tablesInArea = tables.filter(
(table) => table.parentAreaId === area.id
);
// Don't hide area if it has no tables (empty area)
if (tablesInArea.length === 0) {
return {
id: area.id,
type: 'area',
position: { x: area.x, y: area.y },
data: { area },
width: area.width,
height: area.height,
zIndex: -10,
hidden: false,
};
}
const allTablesHidden = tablesInArea.every(
(table) =>
hiddenTableIds?.includes(table.id) ||
!shouldShowTablesBySchemaFilter(table, filteredSchemas)
);
return {
id: area.id,
type: 'area',
position: { x: area.x, y: area.y },
data: { area },
width: area.width,
height: area.height,
zIndex: -10,
hidden: allTablesHidden,
};
};
export interface CanvasProps {
initialTables: DBTable[];
@@ -415,7 +448,14 @@ export const Canvas: React.FC<CanvasProps> = ({ initialTables }) => {
},
};
}),
...areas.map(areaToAreaNode),
...areas.map((area) =>
areaToAreaNode(
area,
tables,
hiddenTableIds,
filteredSchemas
)
),
];
// Check if nodes actually changed

227
src/pages/editor-page/side-panel/tables-section/table-list/table-list.tsx
View File

@@ -17,13 +17,24 @@ import {
verticalListSortingStrategy,
} from '@dnd-kit/sortable';
import { useChartDB } from '@/hooks/use-chartdb.ts';
import type { Area } from '@/lib/domain/area';
import { useTranslation } from 'react-i18next';
import { defaultSchemas } from '@/lib/data/default-schemas';
import { databasesWithSchemas } from '@/lib/domain/db-schema';
export interface TableListProps {
tables: DBTable[];
groupBy?: 'schema' | 'area';
areas?: Area[];
}
export const TableList: React.FC<TableListProps> = ({ tables }) => {
const { updateTablesState } = useChartDB();
export const TableList: React.FC<TableListProps> = ({
tables,
groupBy = 'schema',
areas = [],
}) => {
const { updateTablesState, databaseType } = useChartDB();
const { t } = useTranslation();
const { openTableFromSidebar, openedTableInSidebar } = useLayout();
const lastOpenedTable = React.useRef<string | null>(null);
@@ -87,62 +98,162 @@ export const TableList: React.FC<TableListProps> = ({ tables }) => {
}
}, [scrollToTable, openedTableInSidebar]);
const sortTables = useCallback((tablesToSort: DBTable[]) => {
return tablesToSort.sort((table1: DBTable, table2: DBTable) => {
// if one table has order and the other doesn't, the one with order should come first
if (table1.order && table2.order === undefined) {
return -1;
}
if (table1.order === undefined && table2.order) {
return 1;
}
// if both tables have order, sort by order
if (table1.order !== undefined && table2.order !== undefined) {
return (table1.order ?? 0) - (table2.order ?? 0);
}
// if both tables don't have order, sort by name
if (table1.isView === table2.isView) {
// Both are either tables or views, so sort alphabetically by name
return table1.name.localeCompare(table2.name);
}
// If one is a view and the other is not, put tables first
return table1.isView ? 1 : -1;
});
}, []);
const groupedTables = useMemo(() => {
if (groupBy === 'area') {
// Group tables by area
const tablesWithArea: Record<string, DBTable[]> = {};
const tablesWithoutArea: DBTable[] = [];
// Create a map of area id to area name
const areaMap = areas.reduce(
(acc, area) => {
acc[area.id] = area.name;
return acc;
},
{} as Record<string, string>
);
tables.forEach((table) => {
if (table.parentAreaId && areaMap[table.parentAreaId]) {
if (!tablesWithArea[table.parentAreaId]) {
tablesWithArea[table.parentAreaId] = [];
}
tablesWithArea[table.parentAreaId].push(table);
} else {
tablesWithoutArea.push(table);
}
});
// Sort areas by their order or name
const sortedAreas = areas
.filter((area) => tablesWithArea[area.id])
.sort((a, b) => {
if (a.order !== undefined && b.order !== undefined) {
return a.order - b.order;
}
return a.name.localeCompare(b.name);
});
return [
...sortedAreas.map((area) => ({
id: area.id,
name: area.name,
tables: sortTables(tablesWithArea[area.id]),
})),
...(tablesWithoutArea.length > 0
? [
{
id: 'no-area',
name: t('side_panel.tables_section.no_area'),
tables: sortTables(tablesWithoutArea),
},
]
: []),
];
}
// Group by schema
const supportsSchemas = databasesWithSchemas.includes(databaseType);
if (supportsSchemas) {
// Group tables by schema
const tablesBySchema: Record<string, DBTable[]> = {};
tables.forEach((table) => {
const schema =
table.schema ?? defaultSchemas[databaseType] ?? 'default';
if (!tablesBySchema[schema]) {
tablesBySchema[schema] = [];
}
tablesBySchema[schema].push(table);
});
// Sort schemas alphabetically
const sortedSchemas = Object.keys(tablesBySchema).sort((a, b) =>
a.localeCompare(b)
);
return sortedSchemas.map((schema) => ({
id: `schema-${schema}`,
name: schema,
tables: sortTables(tablesBySchema[schema]),
}));
}
// For databases that don't support schemas, return all tables as one group
return [
{
id: 'all',
name: '',
tables: sortTables(tables),
},
];
}, [tables, groupBy, areas, sortTables, t, databaseType]);
return (
<Accordion
type="single"
collapsible
className="flex w-full flex-col gap-1"
value={openedTableInSidebar}
onValueChange={openTableFromSidebar}
onAnimationEnd={handleScrollToTable}
>
<DndContext
sensors={sensors}
collisionDetection={closestCenter}
onDragEnd={handleDragEnd}
>
<SortableContext
items={tables}
strategy={verticalListSortingStrategy}
>
{tables
.sort((table1: DBTable, table2: DBTable) => {
// if one table has order and the other doesn't, the one with order should come first
if (table1.order && table2.order === undefined) {
return -1;
}
if (table1.order === undefined && table2.order) {
return 1;
}
// if both tables have order, sort by order
if (
table1.order !== undefined &&
table2.order !== undefined
) {
return (
(table1.order ?? 0) - (table2.order ?? 0)
);
}
// if both tables don't have order, sort by name
if (table1.isView === table2.isView) {
// Both are either tables or views, so sort alphabetically by name
return table1.name.localeCompare(table2.name);
}
// If one is a view and the other is not, put tables first
return table1.isView ? 1 : -1;
})
.map((table) => (
<TableListItem
key={table.id}
table={table}
ref={refs[table.id]}
/>
))}
</SortableContext>
</DndContext>
</Accordion>
<div className="flex flex-col gap-3">
{groupedTables.map((group) => (
<div key={group.id}>
{group.name && (
<div className="mb-2 px-2 text-xs font-medium text-muted-foreground">
{group.name}
</div>
)}
<Accordion
type="single"
collapsible
className="flex w-full flex-col gap-1"
value={openedTableInSidebar}
onValueChange={openTableFromSidebar}
onAnimationEnd={handleScrollToTable}
>
<DndContext
sensors={sensors}
collisionDetection={closestCenter}
onDragEnd={handleDragEnd}
>
<SortableContext
items={group.tables}
strategy={verticalListSortingStrategy}
>
{group.tables.map((table) => (
<TableListItem
key={table.id}
table={table}
ref={refs[table.id]}
/>
))}
</SortableContext>
</DndContext>
</Accordion>
</div>
))}
</div>
);
};

57
src/pages/editor-page/side-panel/tables-section/tables-section.tsx
View File

@@ -1,7 +1,7 @@
import React, { useCallback, useMemo, useState } from 'react';
import { TableList } from './table-list/table-list';
import { Button } from '@/components/button/button';
import { Table, List, X, Code, Funnel } from 'lucide-react';
import { Table, List, X, Code, Funnel, Layers, Database } from 'lucide-react';
import { Input } from '@/components/input/input';
import type { DBTable } from '@/lib/domain/db-table';
import { shouldShowTablesBySchemaFilter } from '@/lib/domain/db-table';
@@ -22,20 +22,34 @@ import { useHotkeys } from 'react-hotkeys-hook';
import { getOperatingSystem } from '@/lib/utils';
import type { DBSchema } from '@/lib/domain';
import { useCanvas } from '@/hooks/use-canvas';
import { ToggleGroup, ToggleGroupItem } from '@/components/toggle/toggle-group';
import { databasesWithSchemas } from '@/lib/domain/db-schema';
export interface TablesSectionProps {}
export const TablesSection: React.FC<TablesSectionProps> = () => {
const { createTable, tables, hiddenTableIds, filteredSchemas, schemas } =
useChartDB();
const {
createTable,
tables,
hiddenTableIds,
filteredSchemas,
schemas,
areas,
databaseType,
} = useChartDB();
const { openTableSchemaDialog } = useDialog();
const viewport = useViewport();
const { t } = useTranslation();
const { openTableFromSidebar } = useLayout();
const [filterText, setFilterText] = React.useState('');
const [showDBML, setShowDBML] = useState(false);
const [groupBy, setGroupBy] = useState<'schema' | 'area'>('schema');
const filterInputRef = React.useRef<HTMLInputElement>(null);
const { setShowFilter } = useCanvas();
const supportsSchemas = useMemo(
() => databasesWithSchemas.includes(databaseType),
[databaseType]
);
const filteredTables = useMemo(() => {
const filterTableName: (table: DBTable) => boolean = (table) =>
@@ -183,6 +197,37 @@ export const TablesSection: React.FC<TablesSectionProps> = () => {
{t('side_panel.tables_section.add_table')}
</Button>
</div>
<div className="mb-2">
<ToggleGroup
type="single"
value={groupBy}
onValueChange={(value) => {
if (value) setGroupBy(value as 'schema' | 'area');
}}
className="w-full justify-start"
>
<ToggleGroupItem
value="schema"
aria-label={
supportsSchemas ? 'Group by schema' : 'Default'
}
className="h-8 flex-1 gap-1.5 text-xs"
>
<Database className="size-3.5" />
{supportsSchemas
? t('side_panel.tables_section.group_by_schema')
: t('side_panel.tables_section.default_grouping')}
</ToggleGroupItem>
<ToggleGroupItem
value="area"
aria-label="Group by area"
className="h-8 flex-1 gap-1.5 text-xs"
>
<Layers className="size-3.5" />
{t('side_panel.tables_section.group_by_area')}
</ToggleGroupItem>
</ToggleGroup>
</div>
<div className="flex flex-1 flex-col overflow-hidden">
{showDBML ? (
<TableDBML filteredTables={filteredTables} />
@@ -231,7 +276,11 @@ export const TablesSection: React.FC<TablesSectionProps> = () => {
</Button>
</div>
) : (
<TableList tables={filteredTables} />
<TableList
tables={filteredTables}
groupBy={groupBy}
areas={areas}
/>
)}
</ScrollArea>
)}