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

fix: merge relationship & dependency sections to ref section (#870)

Browse Source 
* fix: merge relationship & dependency sections to ref section

* fix

* fix

* fix
This commit is contained in:
Guy Ben-Aharon
2025-08-25 20:14:32 +03:00
committed by GitHub
parent 0a5874a69b
commit ec3719ebce
40 changed files with 638 additions and 821 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/context/layout-context/layout-context.tsx
View File

@@ -4,8 +4,7 @@ import { createContext } from 'react';
export type SidebarSection =
| 'dbml'
| 'tables'
| 'relationships'
| 'dependencies'
| 'refs'
| 'areas'
| 'customTypes';
@@ -14,14 +13,16 @@ export interface LayoutContext {
openTableFromSidebar: (tableId: string) => void;
closeAllTablesInSidebar: () => void;
openedRelationshipInSidebar: string | undefined;
openRelationshipFromSidebar: (relationshipId: string) => void;
closeAllRelationshipsInSidebar: () => void;
openedDependencyInSidebar: string | undefined;
openDependencyFromSidebar: (dependencyId: string) => void;
closeAllDependenciesInSidebar: () => void;
openedRefInSidebar: string | undefined;
openRefFromSidebar: (refId: string) => void;
closeAllRefsInSidebar: () => void;
openedAreaInSidebar: string | undefined;
openAreaFromSidebar: (areaId: string) => void;
closeAllAreasInSidebar: () => void;
@@ -43,14 +44,16 @@ export const layoutContext = createContext<LayoutContext>({
openedTableInSidebar: undefined,
selectedSidebarSection: 'tables',
openedRelationshipInSidebar: undefined,
openRelationshipFromSidebar: emptyFn,
closeAllRelationshipsInSidebar: emptyFn,
openedDependencyInSidebar: undefined,
openDependencyFromSidebar: emptyFn,
closeAllDependenciesInSidebar: emptyFn,
openedRefInSidebar: undefined,
openRefFromSidebar: emptyFn,
closeAllRefsInSidebar: emptyFn,
openedAreaInSidebar: undefined,
openAreaFromSidebar: emptyFn,
closeAllAreasInSidebar: emptyFn,

33
src/context/layout-context/layout-provider.tsx
View File

@@ -10,10 +10,9 @@ export const LayoutProvider: React.FC<React.PropsWithChildren> = ({
const [openedTableInSidebar, setOpenedTableInSidebar] = React.useState<
string | undefined
>();
const [openedRelationshipInSidebar, setOpenedRelationshipInSidebar] =
React.useState<string | undefined>();
const [openedDependencyInSidebar, setOpenedDependencyInSidebar] =
React.useState<string | undefined>();
const [openedRefInSidebar, setOpenedRefInSidebar] = React.useState<
string | undefined
>();
const [openedAreaInSidebar, setOpenedAreaInSidebar] = React.useState<
string | undefined
>();
@@ -28,10 +27,13 @@ export const LayoutProvider: React.FC<React.PropsWithChildren> = ({
() => setOpenedTableInSidebar('');
const closeAllRelationshipsInSidebar: LayoutContext['closeAllRelationshipsInSidebar'] =
() => setOpenedRelationshipInSidebar('');
() => setOpenedRefInSidebar('');
const closeAllDependenciesInSidebar: LayoutContext['closeAllDependenciesInSidebar'] =
() => setOpenedDependencyInSidebar('');
() => setOpenedRefInSidebar('');
const closeAllRefsInSidebar: LayoutContext['closeAllRefsInSidebar'] = () =>
setOpenedRefInSidebar('');
const closeAllAreasInSidebar: LayoutContext['closeAllAreasInSidebar'] =
() => setOpenedAreaInSidebar('');
@@ -60,17 +62,23 @@ export const LayoutProvider: React.FC<React.PropsWithChildren> = ({
const openRelationshipFromSidebar: LayoutContext['openRelationshipFromSidebar'] =
(relationshipId) => {
showSidePanel();
setSelectedSidebarSection('relationships');
setOpenedRelationshipInSidebar(relationshipId);
setSelectedSidebarSection('refs');
setOpenedRefInSidebar(relationshipId);
};
const openDependencyFromSidebar: LayoutContext['openDependencyFromSidebar'] =
(dependencyId) => {
showSidePanel();
setSelectedSidebarSection('dependencies');
setOpenedDependencyInSidebar(dependencyId);
setSelectedSidebarSection('refs');
setOpenedRefInSidebar(dependencyId);
};
const openRefFromSidebar: LayoutContext['openRefFromSidebar'] = (refId) => {
showSidePanel();
setSelectedSidebarSection('refs');
setOpenedRefInSidebar(refId);
};
const openAreaFromSidebar: LayoutContext['openAreaFromSidebar'] = (
areaId
) => {
@@ -93,7 +101,6 @@ export const LayoutProvider: React.FC<React.PropsWithChildren> = ({
selectedSidebarSection,
openTableFromSidebar,
selectSidebarSection: setSelectedSidebarSection,
openedRelationshipInSidebar,
openRelationshipFromSidebar,
closeAllTablesInSidebar,
closeAllRelationshipsInSidebar,
@@ -101,9 +108,11 @@ export const LayoutProvider: React.FC<React.PropsWithChildren> = ({
hideSidePanel,
showSidePanel,
toggleSidePanel,
openedDependencyInSidebar,
openDependencyFromSidebar,
closeAllDependenciesInSidebar,
openedRefInSidebar,
openRefFromSidebar,
closeAllRefsInSidebar,
openedAreaInSidebar,
openAreaFromSidebar,
closeAllAreasInSidebar,

25
src/i18n/locales/ar.ts
View File

@@ -6,7 +6,7 @@ export const ar: LanguageTranslation = {
new_diagram: 'جديد',
browse: 'تصفح',
tables: 'الجداول',
relationships: 'الروابط',
refs: 'المراجع',
areas: 'المناطق',
dependencies: 'التبعيات',
custom_types: 'الأنواع المخصصة',
@@ -177,12 +177,15 @@ export const ar: LanguageTranslation = {
description: 'أنشئ جدولاً للبدء',
},
},
relationships_section: {
relationships: 'العلاقات',
refs_section: {
refs: 'المراجع',
filter: 'تصفية',
add_relationship: 'إضافة علاقة',
collapse: 'طي الكل',
add_relationship: 'إضافة علاقة',
relationships: 'العلاقات',
dependencies: 'الاعتمادات',
relationship: {
relationship: 'العلاقة',
primary: 'الجدول الأساسي',
foreign: 'الجدول المرتبط',
cardinality: 'الكاردينالية',
@@ -192,16 +195,8 @@ export const ar: LanguageTranslation = {
delete_relationship: 'حذف',
},
},
empty_state: {
title: 'لا توجد علاقات',
description: 'إنشئ علاقة لربط الجداول',
},
},
dependencies_section: {
dependencies: 'الاعتمادات',
filter: 'تصفية',
collapse: 'طي الكل',
dependency: {
dependency: 'الاعتماد',
table: 'الجدول',
dependent_table: 'عرض الاعتمادات',
delete_dependency: 'حذف',
@@ -211,8 +206,8 @@ export const ar: LanguageTranslation = {
},
},
empty_state: {
title: 'لا توجد اعتمادات',
description: 'إنشاء اعتماد للبدء',
title: 'لا توجد علاقات',
description: 'إنشاء علاقة للبدء',
},
},

33
src/i18n/locales/bn.ts
View File

@@ -6,7 +6,7 @@ export const bn: LanguageTranslation = {
new_diagram: 'নতুন',
browse: 'ব্রাউজ',
tables: 'টেবিল',
relationships: 'সম্পর্ক',
refs: 'রেফস',
areas: 'এলাকা',
dependencies: 'নির্ভরতা',
custom_types: 'কাস্টম টাইপ',
@@ -179,14 +179,17 @@ export const bn: LanguageTranslation = {
description: 'শুরু করতে একটি টেবিল তৈরি করুন',
},
},
relationships_section: {
relationships: 'সম্পর্ক',
refs_section: {
refs: 'রেফস',
filter: 'ফিল্টার',
add_relationship: 'সম্পর্ক যোগ করুন',
collapse: 'সব ভাঁজ করুন',
add_relationship: 'সম্পর্ক যোগ করুন',
relationships: 'সম্পর্ক',
dependencies: 'নির্ভরতাগুলি',
relationship: {
relationship: 'সম্পর্ক',
primary: 'প্রাথমিক টেবিল',
foreign: 'বিদেশি টেবিল',
foreign: 'রেফারেন্স করা টেবিল',
cardinality: 'কার্ডিনালিটি',
delete_relationship: 'মুছুন',
relationship_actions: {
@@ -194,27 +197,19 @@ export const bn: LanguageTranslation = {
delete_relationship: 'মুছুন',
},
},
empty_state: {
title: 'কোনো সম্পর্ক নেই',
description: 'টেবিল সংযোগ করতে একটি সম্পর্ক তৈরি করুন',
},
},
dependencies_section: {
dependencies: 'নির্ভরতাগুলি',
filter: 'ফিল্টার',
collapse: 'ভাঁজ করুন',
dependency: {
dependency: 'নির্ভরতা',
table: 'টেবিল',
dependent_table: 'নির্ভরশীল টেবিল',
delete_dependency: 'নির্ভরতা মুছুন',
dependent_table: 'নির্ভরশীল ভিউ',
delete_dependency: 'মুছুন',
dependency_actions: {
title: 'কর্ম',
delete_dependency: 'নির্ভরতা মুছুন',
delete_dependency: 'মুছুন',
},
},
empty_state: {
title: 'কোনো নির্ভরতাগুলি নেই',
description: 'এই অংশে কোনো নির্ভরতা উপলব্ধ নেই।',
title: 'কোনো সম্পর্ক নেই',
description: 'শুরু করতে একটি সম্পর্ক তৈরি করুন',
},
},

30
src/i18n/locales/de.ts
View File

@@ -6,7 +6,7 @@ export const de: LanguageTranslation = {
new_diagram: 'Neu',
browse: 'Durchsuchen',
tables: 'Tabellen',
relationships: 'Beziehungen',
refs: 'Refs',
areas: 'Bereiche',
dependencies: 'Abhängigkeiten',
custom_types: 'Benutzerdefinierte Typen',
@@ -180,32 +180,26 @@ export const de: LanguageTranslation = {
description: 'Erstellen Sie eine Tabelle, um zu beginnen',
},
},
relationships_section: {
relationships: 'Beziehungen',
refs_section: {
refs: 'Refs',
filter: 'Filter',
add_relationship: 'Beziehung hinzufügen',
collapse: 'Alle einklappen',
add_relationship: 'Beziehung hinzufügen',
relationships: 'Beziehungen',
dependencies: 'Abhängigkeiten',
relationship: {
relationship: 'Beziehung',
primary: 'Primäre Tabelle',
foreign: 'Referenzierte Tabelle',
cardinality: 'Kardinalität',
delete_relationship: 'Beziehung löschen',
delete_relationship: 'Löschen',
relationship_actions: {
title: 'Aktionen',
delete_relationship: 'Beziehung löschen',
delete_relationship: 'Löschen',
},
},
empty_state: {
title: 'Keine Beziehungen',
description:
'Erstellen Sie eine Beziehung, um Tabellen zu verbinden',
},
},
dependencies_section: {
dependencies: 'Abhängigkeiten',
filter: 'Filter',
collapse: 'Alle einklappen',
dependency: {
dependency: 'Abhängigkeit',
table: 'Tabelle',
dependent_table: 'Abhängige Ansicht',
delete_dependency: 'Löschen',
@@ -215,8 +209,8 @@ export const de: LanguageTranslation = {
},
},
empty_state: {
title: 'Keine Abhängigkeiten',
description: 'Erstellen Sie eine Ansicht, um zu beginnen',
title: 'Keine Beziehungen',
description: 'Erstellen Sie eine Beziehung, um zu beginnen',
},
},

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

@@ -6,7 +6,7 @@ export const en = {
new_diagram: 'New',
browse: 'Browse',
tables: 'Tables',
relationships: 'Refs',
refs: 'Refs',
areas: 'Areas',
dependencies: 'Dependencies',
custom_types: 'Custom Types',
@@ -173,12 +173,15 @@ export const en = {
description: 'Create a table to get started',
},
},
relationships_section: {
relationships: 'Relationships',
refs_section: {
refs: 'Refs',
filter: 'Filter',
add_relationship: 'Add Relationship',
collapse: 'Collapse All',
add_relationship: 'Add Relationship',
relationships: 'Relationships',
dependencies: 'Dependencies',
relationship: {
relationship: 'Relationship',
primary: 'Primary Table',
foreign: 'Referenced Table',
cardinality: 'Cardinality',
@@ -188,16 +191,8 @@ export const en = {
delete_relationship: 'Delete',
},
},
empty_state: {
title: 'No relationships',
description: 'Create a relationship to connect tables',
},
},
dependencies_section: {
dependencies: 'Dependencies',
filter: 'Filter',
collapse: 'Collapse All',
dependency: {
dependency: 'Dependency',
table: 'Table',
dependent_table: 'Dependent View',
delete_dependency: 'Delete',
@@ -207,8 +202,8 @@ export const en = {
},
},
empty_state: {
title: 'No dependencies',
description: 'Create a view to get started',
title: 'No relationships',
description: 'Create a relationship to get started',
},
},

31
src/i18n/locales/es.ts
View File

@@ -6,7 +6,7 @@ export const es: LanguageTranslation = {
new_diagram: 'Nuevo',
browse: 'Examinar',
tables: 'Tablas',
relationships: 'Relaciones',
refs: 'Refs',
areas: 'Áreas',
dependencies: 'Dependencias',
custom_types: 'Tipos Personalizados',
@@ -178,14 +178,17 @@ export const es: LanguageTranslation = {
description: 'Crea una tabla para comenzar',
},
},
relationships_section: {
relationships: 'Relaciones',
add_relationship: 'Agregar Relación',
refs_section: {
refs: 'Refs',
filter: 'Filtrar',
collapse: 'Colapsar Todo',
add_relationship: 'Agregar Relación',
relationships: 'Relaciones',
dependencies: 'Dependencias',
relationship: {
primary: 'Primaria',
foreign: 'Foránea',
relationship: 'Relación',
primary: 'Tabla Primaria',
foreign: 'Tabla Referenciada',
cardinality: 'Cardinalidad',
delete_relationship: 'Eliminar',
relationship_actions: {
@@ -193,18 +196,10 @@ export const es: LanguageTranslation = {
delete_relationship: 'Eliminar',
},
},
empty_state: {
title: 'No hay relaciones',
description: 'Crea una relación para conectar tablas',
},
},
dependencies_section: {
dependencies: 'Dependencias',
filter: 'Filtro',
collapse: 'Colapsar todo',
dependency: {
dependency: 'Dependencia',
table: 'Tabla',
dependent_table: 'Vista dependiente',
dependent_table: 'Vista Dependiente',
delete_dependency: 'Eliminar',
dependency_actions: {
title: 'Acciones',
@@ -212,8 +207,8 @@ export const es: LanguageTranslation = {
},
},
empty_state: {
title: 'Sin dependencias',
description: 'Crea una vista para comenzar',
title: 'Sin relaciones',
description: 'Crea una relación para comenzar',
},
},

25
src/i18n/locales/fr.ts
View File

@@ -6,7 +6,7 @@ export const fr: LanguageTranslation = {
new_diagram: 'Nouveau',
browse: 'Parcourir',
tables: 'Tables',
relationships: 'Relations',
refs: 'Refs',
areas: 'Zones',
dependencies: 'Dépendances',
custom_types: 'Types Personnalisés',
@@ -176,12 +176,15 @@ export const fr: LanguageTranslation = {
description: 'Créez une table pour commencer',
},
},
relationships_section: {
relationships: 'Relations',
refs_section: {
refs: 'Refs',
filter: 'Filtrer',
add_relationship: 'Ajouter une Relation',
collapse: 'Réduire Tout',
add_relationship: 'Ajouter une Relation',
relationships: 'Relations',
dependencies: 'Dépendances',
relationship: {
relationship: 'Relation',
primary: 'Table Principale',
foreign: 'Table Référencée',
cardinality: 'Cardinalité',
@@ -191,16 +194,8 @@ export const fr: LanguageTranslation = {
delete_relationship: 'Supprimer',
},
},
empty_state: {
title: 'Aucune relation',
description: 'Créez une relation pour connecter les tables',
},
},
dependencies_section: {
dependencies: 'Dépendances',
filter: 'Filtrer',
collapse: 'Réduire Tout',
dependency: {
dependency: 'Dépendance',
table: 'Table',
dependent_table: 'Vue Dépendante',
delete_dependency: 'Supprimer',
@@ -210,8 +205,8 @@ export const fr: LanguageTranslation = {
},
},
empty_state: {
title: 'Aucune dépendance',
description: 'Créez une vue pour commencer',
title: 'Aucune relation',
description: 'Créez une relation pour commencer',
},
},

33
src/i18n/locales/gu.ts
View File

@@ -6,7 +6,7 @@ export const gu: LanguageTranslation = {
new_diagram: 'નવું',
browse: 'બ્રાઉજ',
tables: 'ટેબલો',
relationships: 'સંબંધો',
refs: 'રેફ્સ',
areas: 'ક્ષેત્રો',
dependencies: 'નિર્ભરતાઓ',
custom_types: 'કસ્ટમ ટાઇપ',
@@ -180,14 +180,17 @@ export const gu: LanguageTranslation = {
description: 'શરૂ કરવા માટે એક ટેબલ બનાવો',
},
},
relationships_section: {
relationships: 'સંબંધો',
refs_section: {
refs: 'રેફ્સ',
filter: 'ફિલ્ટર',
add_relationship: 'સંબંધ ઉમેરો',
collapse: 'બધાને સકુચિત કરો',
add_relationship: 'સંબંધ ઉમેરો',
relationships: 'સંબંધો',
dependencies: 'નિર્ભરતાઓ',
relationship: {
relationship: 'સંબંધ',
primary: 'પ્રાથમિક ટેબલ',
foreign: 'સંદર્ભ ટેબલ',
foreign: 'સંદર્ભિત ટેબલ',
cardinality: 'કાર્ડિનાલિટી',
delete_relationship: 'કાઢી નાખો',
relationship_actions: {
@@ -195,27 +198,19 @@ export const gu: LanguageTranslation = {
delete_relationship: 'કાઢી નાખો',
},
},
empty_state: {
title: 'કોઈ સંબંધો નથી',
description: 'ટેબલ્સ કનેક્ટ કરવા માટે એક સંબંધ બનાવો',
},
},
dependencies_section: {
dependencies: 'નિર્ભરતાઓ',
filter: 'ફિલ્ટર',
collapse: 'સિકોડો',
dependency: {
dependency: 'નિર્ભરતા',
table: 'ટેબલ',
dependent_table: 'આધાર રાખેલું ટેબલ',
delete_dependency: 'નિર્ભરતા કાઢી નાખો',
dependent_table: 'નિર્ભરશીલ વ્યૂ',
delete_dependency: 'કાઢી નાખો',
dependency_actions: {
title: 'ક્રિયાઓ',
delete_dependency: 'નિર્ભરતા કાઢી નાખો',
delete_dependency: 'કાઢી નાખો',
},
},
empty_state: {
title: 'કોઈ નિર્ભરતાઓ નથી',
description: 'આ વિભાગમાં કોઈ નિર્ભરતા ઉપલબ્ધ નથી.',
title: 'કોઈ સંબંધો નથી',
description: 'શરૂ કરવા માટે એક સંબંધ બનાવો',
},
},

34
src/i18n/locales/hi.ts
View File

@@ -6,7 +6,7 @@ export const hi: LanguageTranslation = {
new_diagram: 'नया',
browse: 'ब्राउज़',
tables: 'टेबल',
relationships: 'संबंध',
refs: 'रेफ्स',
areas: 'क्षेत्र',
dependencies: 'निर्भरताएं',
custom_types: 'कस्टम टाइप',
@@ -179,12 +179,15 @@ export const hi: LanguageTranslation = {
description: 'शुरू करने के लिए एक तालिका बनाएँ',
},
},
relationships_section: {
relationships: 'संबंध',
refs_section: {
refs: 'रेफ्स',
filter: 'फ़िल्टर',
add_relationship: 'संबंध जोड़ें',
collapse: 'सभी को संक्षिप्त करें',
add_relationship: 'संबंध जोड़ें',
relationships: 'संबंध',
dependencies: 'निर्भरताएँ',
relationship: {
relationship: 'संबंध',
primary: 'प्राथमिक तालिका',
foreign: 'संदर्भित तालिका',
cardinality: 'कार्डिनैलिटी',
@@ -194,28 +197,19 @@ export const hi: LanguageTranslation = {
delete_relationship: 'हटाएँ',
},
},
empty_state: {
title: 'कोई संबंध नहीं',
description:
'तालिकाओं को कनेक्ट करने के लिए एक संबंध बनाएँ',
},
},
dependencies_section: {
dependencies: 'निर्भरताएँ',
filter: 'फ़िल्टर',
collapse: 'सिकोड़ें',
dependency: {
dependency: 'निर्भरता',
table: 'तालिका',
dependent_table: 'आश्रित तालिका',
delete_dependency: 'निर्भरता हटाएँ',
dependent_table: 'आश्रित दृश्य',
delete_dependency: 'हटाएँ',
dependency_actions: {
title: 'कार्रवाइयाँ',
delete_dependency: 'निर्भरता हटाएँ',
title: 'क्रियाएँ',
delete_dependency: 'हटाएँ',
},
},
empty_state: {
title: 'कोई निर्भरता नहीं',
description: 'इस अनुभाग में कोई निर्भरता उपलब्ध नहीं है।',
title: 'कोई संबंध नहीं',
description: 'शुरू करने के लिए एक संबंध बनाएँ',
},
},

25
src/i18n/locales/hr.ts
View File

@@ -6,7 +6,7 @@ export const hr: LanguageTranslation = {
new_diagram: 'Novi',
browse: 'Pregledaj',
tables: 'Tablice',
relationships: 'Veze',
refs: 'Refs',
areas: 'Područja',
dependencies: 'Ovisnosti',
custom_types: 'Prilagođeni Tipovi',
@@ -174,12 +174,15 @@ export const hr: LanguageTranslation = {
description: 'Stvorite tablicu za početak',
},
},
relationships_section: {
relationships: 'Veze',
refs_section: {
refs: 'Refs',
filter: 'Filtriraj',
add_relationship: 'Dodaj vezu',
collapse: 'Sažmi sve',
add_relationship: 'Dodaj vezu',
relationships: 'Veze',
dependencies: 'Ovisnosti',
relationship: {
relationship: 'Veza',
primary: 'Primarna tablica',
foreign: 'Referentna tablica',
cardinality: 'Kardinalnost',
@@ -189,16 +192,8 @@ export const hr: LanguageTranslation = {
delete_relationship: 'Izbriši',
},
},
empty_state: {
title: 'Nema veza',
description: 'Stvorite vezu za povezivanje tablica',
},
},
dependencies_section: {
dependencies: 'Ovisnosti',
filter: 'Filtriraj',
collapse: 'Sažmi sve',
dependency: {
dependency: 'Ovisnost',
table: 'Tablica',
dependent_table: 'Ovisni pogled',
delete_dependency: 'Izbriši',
@@ -208,8 +203,8 @@ export const hr: LanguageTranslation = {
},
},
empty_state: {
title: 'Nema ovisnosti',
description: 'Stvorite pogled za početak',
title: 'Nema veze',
description: 'Stvorite vezu za početak',
},
},

25
src/i18n/locales/id_ID.ts
View File

@@ -6,7 +6,7 @@ export const id_ID: LanguageTranslation = {
new_diagram: 'Baru',
browse: 'Jelajahi',
tables: 'Tabel',
relationships: 'Relasi',
refs: 'Refs',
areas: 'Area',
dependencies: 'Ketergantungan',
custom_types: 'Tipe Kustom',
@@ -178,12 +178,15 @@ export const id_ID: LanguageTranslation = {
description: 'Buat tabel untuk memulai',
},
},
relationships_section: {
relationships: 'Hubungan',
refs_section: {
refs: 'Refs',
filter: 'Saring',
add_relationship: 'Tambah Hubungan',
collapse: 'Lipat Semua',
add_relationship: 'Tambah Hubungan',
relationships: 'Hubungan',
dependencies: 'Dependensi',
relationship: {
relationship: 'Hubungan',
primary: 'Tabel Primer',
foreign: 'Tabel Referensi',
cardinality: 'Kardinalitas',
@@ -193,16 +196,8 @@ export const id_ID: LanguageTranslation = {
delete_relationship: 'Hapus',
},
},
empty_state: {
title: 'Tidak ada hubungan',
description: 'Buat hubungan untuk menghubungkan tabel',
},
},
dependencies_section: {
dependencies: 'Dependensi',
filter: 'Saring',
collapse: 'Lipat Semua',
dependency: {
dependency: 'Dependensi',
table: 'Tabel',
dependent_table: 'Tampilan Dependen',
delete_dependency: 'Hapus',
@@ -212,8 +207,8 @@ export const id_ID: LanguageTranslation = {
},
},
empty_state: {
title: 'Tidak ada dependensi',
description: 'Buat tampilan untuk memulai',
title: 'Tidak ada hubungan',
description: 'Buat hubungan untuk memulai',
},
},

38
src/i18n/locales/ja.ts
View File

@@ -6,7 +6,7 @@ export const ja: LanguageTranslation = {
new_diagram: '新規',
browse: '参照',
tables: 'テーブル',
relationships: 'リレーション',
refs: '参照',
areas: 'エリア',
dependencies: '依存関係',
custom_types: 'カスタムタイプ',
@@ -182,12 +182,15 @@ export const ja: LanguageTranslation = {
description: 'テーブルを作成して開始してください',
},
},
relationships_section: {
relationships: 'リレーションシップ',
refs_section: {
refs: '参照',
filter: 'フィルタ',
add_relationship: 'リレーションシップを追加',
collapse: 'すべて折りたたむ',
add_relationship: 'リレーションシップを追加',
relationships: 'リレーションシップ',
dependencies: '依存関係',
relationship: {
relationship: 'リレーションシップ',
primary: '主テーブル',
foreign: '参照テーブル',
cardinality: 'カーディナリティ',
@@ -197,29 +200,20 @@ export const ja: LanguageTranslation = {
delete_relationship: '削除',
},
},
empty_state: {
title: 'リレーションシップがありません',
description:
'テーブルを接続するためにリレーションシップを作成してください',
},
},
// TODO: Translate
dependencies_section: {
dependencies: 'Dependencies',
filter: 'Filter',
collapse: 'Collapse All',
dependency: {
table: 'Table',
dependent_table: 'Dependent View',
delete_dependency: 'Delete',
dependency: '依存関係',
table: 'テーブル',
dependent_table: '依存ビュー',
delete_dependency: '削除',
dependency_actions: {
title: 'Actions',
delete_dependency: 'Delete',
title: '操作',
delete_dependency: '削除',
},
},
empty_state: {
title: 'No dependencies',
description: 'Create a view to get started',
title: 'リレーションシップがありません',
description:
'開始するためにリレーションシップを作成してください',
},
},

25
src/i18n/locales/ko_KR.ts
View File

@@ -6,7 +6,7 @@ export const ko_KR: LanguageTranslation = {
new_diagram: '새로 만들기',
browse: '찾아보기',
tables: '테이블',
relationships: '관계',
refs: 'Refs',
areas: '영역',
dependencies: '종속성',
custom_types: '사용자 지정 타입',
@@ -178,12 +178,15 @@ export const ko_KR: LanguageTranslation = {
description: '테이블을 만들어 시작하세요.',
},
},
relationships_section: {
relationships: '연관 관계',
refs_section: {
refs: 'Refs',
filter: '필터',
add_relationship: '연관 관계 추가',
collapse: '모두 접기',
add_relationship: '연관 관계 추가',
relationships: '연관 관계',
dependencies: '종속성',
relationship: {
relationship: '연관 관계',
primary: '주 테이블',
foreign: '참조 테이블',
cardinality: '카디널리티',
@@ -193,16 +196,8 @@ export const ko_KR: LanguageTranslation = {
delete_relationship: '연관 관계 삭제',
},
},
empty_state: {
title: '연관 관계',
description: '테이블 연결을 위해 연관 관계를 생성하세요',
},
},
dependencies_section: {
dependencies: '종속성',
filter: '필터',
collapse: '모두 접기',
dependency: {
dependency: '종속성',
table: '테이블',
dependent_table: '뷰 테이블',
delete_dependency: '삭제',
@@ -212,8 +207,8 @@ export const ko_KR: LanguageTranslation = {
},
},
empty_state: {
title: '뷰 테이블 없음',
description: '뷰 테이블을 만들어 시작하세요.',
title: '연관 관계 없음',
description: '연관 관계를 만들어 시작하세요.',
},
},

26
src/i18n/locales/mr.ts
View File

@@ -6,7 +6,7 @@ export const mr: LanguageTranslation = {
new_diagram: 'नवीन',
browse: 'ब्राउज',
tables: 'टेबल',
relationships: 'संबंध',
refs: 'Refs',
areas: 'क्षेत्रे',
dependencies: 'अवलंबने',
custom_types: 'कस्टम प्रकार',
@@ -182,12 +182,15 @@ export const mr: LanguageTranslation = {
description: 'सुरू करण्यासाठी एक टेबल तयार करा',
},
},
relationships_section: {
relationships: 'रिलेशनशिप',
refs_section: {
refs: 'Refs',
filter: 'फिल्टर',
add_relationship: 'रिलेशनशिप जोडा',
collapse: 'सर्व संकुचित करा',
add_relationship: 'रिलेशनशिप जोडा',
relationships: 'रिलेशनशिप',
dependencies: 'डिपेंडेन्सि',
relationship: {
relationship: 'रिलेशनशिप',
primary: 'प्राथमिक टेबल',
foreign: 'रेफरंस टेबल',
cardinality: 'कार्डिनॅलिटी',
@@ -197,17 +200,8 @@ export const mr: LanguageTranslation = {
delete_relationship: 'हटवा',
},
},
empty_state: {
title: 'कोणतेही रिलेशनशिप नाहीत',
description:
'टेबल्स कनेक्ट करण्यासाठी एक रिलेशनशिप तयार करा',
},
},
dependencies_section: {
dependencies: 'डिपेंडेन्सि',
filter: 'फिल्टर',
collapse: 'सर्व संकुचित करा',
dependency: {
dependency: 'डिपेंडेन्सि',
table: 'टेबल',
dependent_table: 'डिपेंडेन्सि दृश्य',
delete_dependency: 'हटवा',
@@ -217,8 +211,8 @@ export const mr: LanguageTranslation = {
},
},
empty_state: {
title: 'कोणत्याही डिपेंडेन्सि नाहीत',
description: 'सुरू करण्यासाठी एक दृश्य तयार करा',
title: 'कोणतेही रिलेशनशिप नाहीत',
description: 'सुरू करण्यासाठी एक रिलेशनशिप तयार करा',
},
},

26
src/i18n/locales/ne.ts
View File

@@ -6,7 +6,7 @@ export const ne: LanguageTranslation = {
new_diagram: 'नयाँ',
browse: 'ब्राउज',
tables: 'टेबलहरू',
relationships: 'सम्बन्धहरू',
refs: 'Refs',
areas: 'क्षेत्रहरू',
dependencies: 'निर्भरताहरू',
custom_types: 'कस्टम प्रकारहरू',
@@ -179,12 +179,15 @@ export const ne: LanguageTranslation = {
description: 'सुरु गर्नका लागि एक तालिका बनाउनुहोस्',
},
},
relationships_section: {
relationships: 'सम्बन्धहरू',
refs_section: {
refs: 'Refs',
filter: 'फिल्टर',
add_relationship: 'सम्बन्ध थप्नुहोस्',
collapse: 'सबै लुकाउनुहोस्',
add_relationship: 'सम्बन्ध थप्नुहोस्',
relationships: 'सम्बन्धहरू',
dependencies: 'डिपेन्डेन्सीहरू',
relationship: {
relationship: 'सम्बन्ध',
primary: 'मुख्य तालिका',
foreign: 'परिचित तालिका',
cardinality: 'कार्डिन्यालिटी',
@@ -194,16 +197,8 @@ export const ne: LanguageTranslation = {
delete_relationship: 'हटाउनुहोस्',
},
},
empty_state: {
title: 'कुनै सम्बन्धहरू छैनन्',
description: 'तालिकाहरू जोड्नका लागि एक सम्बन्ध बनाउनुहोस्',
},
},
dependencies_section: {
dependencies: 'डिपेन्डेन्सीहरू',
filter: 'फिल्टर',
collapse: 'सबै लुकाउनुहोस्',
dependency: {
dependency: 'डिपेन्डेन्सी',
table: 'तालिका',
dependent_table: 'विचलित तालिका',
delete_dependency: 'हटाउनुहोस्',
@@ -213,9 +208,8 @@ export const ne: LanguageTranslation = {
},
},
empty_state: {
title: 'कुनै डिपेन्डेन्सीहरू छैनन्',
description:
'डिपेन्डेन्सीहरू देखाउनका लागि एक व्यू बनाउनुहोस्',
title: 'कुनै सम्बन्धहरू छैनन्',
description: 'सुरु गर्नका लागि एक सम्बन्ध बनाउनुहोस्',
},
},

25
src/i18n/locales/pt_BR.ts
View File

@@ -6,7 +6,7 @@ export const pt_BR: LanguageTranslation = {
new_diagram: 'Novo',
browse: 'Navegar',
tables: 'Tabelas',
relationships: 'Relacionamentos',
refs: 'Refs',
areas: 'Áreas',
dependencies: 'Dependências',
custom_types: 'Tipos Personalizados',
@@ -179,12 +179,15 @@ export const pt_BR: LanguageTranslation = {
description: 'Crie uma tabela para começar',
},
},
relationships_section: {
relationships: 'Relacionamentos',
refs_section: {
refs: 'Refs',
filter: 'Filtrar',
add_relationship: 'Adicionar Relacionamento',
collapse: 'Colapsar Todas',
add_relationship: 'Adicionar Relacionamento',
relationships: 'Relacionamentos',
dependencies: 'Dependências',
relationship: {
relationship: 'Relacionamento',
primary: 'Tabela Primária',
foreign: 'Tabela Referenciada',
cardinality: 'Cardinalidade',
@@ -194,16 +197,8 @@ export const pt_BR: LanguageTranslation = {
delete_relationship: 'Excluir',
},
},
empty_state: {
title: 'Sem relacionamentos',
description: 'Crie um relacionamento para conectar tabelas',
},
},
dependencies_section: {
dependencies: 'Dependências',
filter: 'Filtrar',
collapse: 'Colapsar Todas',
dependency: {
dependency: 'Dependência',
table: 'Tabela',
dependent_table: 'Visualização Dependente',
delete_dependency: 'Excluir',
@@ -213,8 +208,8 @@ export const pt_BR: LanguageTranslation = {
},
},
empty_state: {
title: 'Sem dependências',
description: 'Crie uma visualização para começar',
title: 'Sem relacionamentos',
description: 'Crie um relacionamento para começar',
},
},

29
src/i18n/locales/ru.ts
View File

@@ -6,7 +6,7 @@ export const ru: LanguageTranslation = {
new_diagram: 'Новая',
browse: 'Обзор',
tables: 'Таблицы',
relationships: 'Связи',
refs: 'Ссылки',
areas: 'Области',
dependencies: 'Зависимости',
custom_types: 'Пользовательские типы',
@@ -175,12 +175,15 @@ export const ru: LanguageTranslation = {
description: 'Создайте таблицу, чтобы начать',
},
},
relationships_section: {
relationships: 'Отношения',
refs_section: {
refs: 'Ссылки',
filter: 'Фильтр',
add_relationship: 'Добавить отношение',
collapse: 'Свернуть все',
add_relationship: 'Добавить отношение',
relationships: 'Отношения',
dependencies: 'Зависимости',
relationship: {
relationship: 'Отношение',
primary: 'Основная таблица',
foreign: 'Справочная таблица',
cardinality: 'Тип множественной связи',
@@ -190,18 +193,10 @@ export const ru: LanguageTranslation = {
delete_relationship: 'Удалить',
},
},
empty_state: {
title: 'Нет отношений',
description: 'Создайте связь для соединения таблиц',
},
},
dependencies_section: {
dependencies: 'Зависимости',
filter: 'Фильтр',
collapse: 'Свернуть все',
dependency: {
table: 'Стол',
dependent_table: 'Зависимый вид',
dependency: 'Зависимость',
table: 'Таблица',
dependent_table: 'Зависимое представление',
delete_dependency: 'Удалить',
dependency_actions: {
title: 'Действия',
@@ -209,8 +204,8 @@ export const ru: LanguageTranslation = {
},
},
empty_state: {
title: 'Нет зависимостей',
description: 'Создайте представление, чтобы начать',
title: 'Нет отношений',
description: 'Создайте отношение, чтобы начать',
},
},

25
src/i18n/locales/te.ts
View File

@@ -6,7 +6,7 @@ export const te: LanguageTranslation = {
new_diagram: 'కొత్తది',
browse: 'బ్రాఉజ్',
tables: 'టేబల్లు',
relationships: 'సంబంధాలు',
refs: 'సంబంధాలు',
areas: 'ప్రదేశాలు',
dependencies: 'ఆధారతలు',
custom_types: 'కస్టమ్ టైప్స్',
@@ -180,12 +180,15 @@ export const te: LanguageTranslation = {
description: 'ప్రారంభించడానికి ఒక పట్టిక సృష్టించండి',
},
},
relationships_section: {
relationships: 'సంబంధాలు',
refs_section: {
refs: 'Refs',
filter: 'ఫిల్టర్',
add_relationship: 'సంబంధం జోడించు',
collapse: 'అన్ని కూల్ చేయి',
add_relationship: 'సంబంధం జోడించు',
relationships: 'సంబంధాలు',
dependencies: 'ఆధారాలు',
relationship: {
relationship: 'సంబంధం',
primary: 'ప్రాథమిక పట్టిక',
foreign: 'సూచించబడిన పట్టిక',
cardinality: 'కార్డినాలిటీ',
@@ -195,16 +198,8 @@ export const te: LanguageTranslation = {
delete_relationship: 'సంబంధం తొలగించు',
},
},
empty_state: {
title: 'సంబంధాలు లేవు',
description: 'పట్టికలను అనుసంధించడానికి సంబంధం సృష్టించండి',
},
},
dependencies_section: {
dependencies: 'ఆధారాలు',
filter: 'ఫిల్టర్',
collapse: 'అన్ని కూల్ చేయి',
dependency: {
dependency: 'ఆధారం',
table: 'పట్టిక',
dependent_table: 'ఆధారిత వీక్షణ',
delete_dependency: 'ఆధారాన్ని తొలగించు',
@@ -214,8 +209,8 @@ export const te: LanguageTranslation = {
},
},
empty_state: {
title: 'ఆధారాలు లేవు',
description: 'ప్రారంభించడానికి ఒక వీక్షణ సృష్టించండి',
title: 'సంబంధాలు లేవు',
description: 'ప్రారంభించడానికి ఒక సంబంధం సృష్టించండి',
},
},

25
src/i18n/locales/tr.ts
View File

@@ -6,7 +6,7 @@ export const tr: LanguageTranslation = {
new_diagram: 'Yeni',
browse: 'Gözat',
tables: 'Tablolar',
relationships: 'İlişkiler',
refs: 'Refs',
areas: 'Alanlar',
dependencies: 'Bağımlılıklar',
custom_types: 'Özel Tipler',
@@ -179,12 +179,15 @@ export const tr: LanguageTranslation = {
description: 'Başlamak için bir tablo oluşturun',
},
},
relationships_section: {
relationships: 'İlişkiler',
refs_section: {
refs: 'Refs',
filter: 'Filtrele',
add_relationship: 'İlişki Ekle',
collapse: 'Hepsini Daralt',
add_relationship: 'İlişki Ekle',
relationships: 'İlişkiler',
dependencies: 'Bağımlılıklar',
relationship: {
relationship: 'İlişki',
primary: 'Birincil Tablo',
foreign: 'Referans Tablo',
cardinality: 'Kardinalite',
@@ -194,16 +197,8 @@ export const tr: LanguageTranslation = {
delete_relationship: 'Sil',
},
},
empty_state: {
title: 'İlişki yok',
description: 'Tabloları bağlamak için bir ilişki oluşturun',
},
},
dependencies_section: {
dependencies: 'Bağımlılıklar',
filter: 'Filtrele',
collapse: 'Hepsini Daralt',
dependency: {
dependency: 'Bağımlılık',
table: 'Tablo',
dependent_table: 'Bağımlı Görünüm',
delete_dependency: 'Sil',
@@ -213,8 +208,8 @@ export const tr: LanguageTranslation = {
},
},
empty_state: {
title: 'Bağımlılık yok',
description: 'Başlamak için bir görünüm oluşturun',
title: 'İlişki yok',
description: 'Başlamak için bir ilişki oluşturun',
},
},

25
src/i18n/locales/uk.ts
View File

@@ -6,7 +6,7 @@ export const uk: LanguageTranslation = {
new_diagram: 'Нова',
browse: 'Огляд',
tables: 'Таблиці',
relationships: 'Зв’язки',
refs: 'Зв’язки',
areas: 'Області',
dependencies: 'Залежності',
custom_types: 'Користувацькі типи',
@@ -177,12 +177,15 @@ export const uk: LanguageTranslation = {
description: 'Щоб почати, створіть таблицю',
},
},
relationships_section: {
relationships: 'Звʼязки',
refs_section: {
refs: 'Refs',
filter: 'Фільтр',
add_relationship: 'Додати звʼязок',
collapse: 'Згорнути все',
add_relationship: 'Додати звʼязок',
relationships: 'Звʼязки',
dependencies: 'Залежності',
relationship: {
relationship: 'Звʼязок',
primary: 'Первинна таблиця',
foreign: 'Посилання на таблицю',
cardinality: 'Звʼязок',
@@ -192,16 +195,8 @@ export const uk: LanguageTranslation = {
delete_relationship: 'Видалити',
},
},
empty_state: {
title: 'Звʼязків немає',
description: 'Створіть звʼязок для зʼєднання таблиць',
},
},
dependencies_section: {
dependencies: 'Залежності',
filter: 'Фільтр',
collapse: 'Згорнути все',
dependency: {
dependency: 'Залежність',
table: 'Таблиця',
dependent_table: 'Залежне подання',
delete_dependency: 'Видалити',
@@ -211,8 +206,8 @@ export const uk: LanguageTranslation = {
},
},
empty_state: {
title: 'Жодних залежностей',
description: 'Створіть подання, щоб почати',
title: 'Жодних зв’язків',
description: 'Створіть зв’язок, щоб почати',
},
},

25
src/i18n/locales/vi.ts
View File

@@ -6,7 +6,7 @@ export const vi: LanguageTranslation = {
new_diagram: 'Mới',
browse: 'Duyệt',
tables: 'Bảng',
relationships: 'Mối quan hệ',
refs: 'Refs',
areas: 'Khu vực',
dependencies: 'Phụ thuộc',
custom_types: 'Kiểu tùy chỉnh',
@@ -178,12 +178,15 @@ export const vi: LanguageTranslation = {
description: 'Tạo một bảng để bắt đầu',
},
},
relationships_section: {
relationships: 'Quan hệ',
refs_section: {
refs: 'Refs',
filter: 'Lọc',
add_relationship: 'Thêm quan hệ',
collapse: 'Thu gọn tất cả',
add_relationship: 'Thêm quan hệ',
relationships: 'Quan hệ',
dependencies: 'Phụ thuộc',
relationship: {
relationship: 'Quan hệ',
primary: 'Bảng khóa chính',
foreign: 'Bảng khóa ngoại',
cardinality: 'Quan hệ',
@@ -193,16 +196,8 @@ export const vi: LanguageTranslation = {
delete_relationship: 'Xóa',
},
},
empty_state: {
title: 'Không có quan hệ',
description: 'Tạo quan hệ để kết nối các bảng',
},
},
dependencies_section: {
dependencies: 'Phụ thuộc',
filter: 'Lọc',
collapse: 'Thu gọn tất cả',
dependency: {
dependency: 'Phụ thuộc',
table: 'Bảng',
dependent_table: 'Bảng xem phụ thuộc',
delete_dependency: 'Xóa',
@@ -212,8 +207,8 @@ export const vi: LanguageTranslation = {
},
},
empty_state: {
title: 'Không có phụ thuộc',
description: 'Tạo bảng xem phụ thuộc để bắt đầu',
title: 'Không có quan hệ',
description: 'Tạo một quan hệ để bắt đầu',
},
},

25
src/i18n/locales/zh_CN.ts
View File

@@ -6,7 +6,7 @@ export const zh_CN: LanguageTranslation = {
new_diagram: '新建',
browse: '浏览',
tables: '表',
relationships: '关系',
refs: '引用',
areas: '区域',
dependencies: '依赖关系',
custom_types: '自定义类型',
@@ -175,12 +175,15 @@ export const zh_CN: LanguageTranslation = {
description: '新建表以开始',
},
},
relationships_section: {
relationships: '关系',
refs_section: {
refs: '引用',
filter: '筛选',
add_relationship: '添加关系',
collapse: '全部折叠',
add_relationship: '添加关系',
relationships: '关系',
dependencies: '依赖关系',
relationship: {
relationship: '关系',
primary: '主表',
foreign: '被引用表',
cardinality: '基数',
@@ -190,16 +193,8 @@ export const zh_CN: LanguageTranslation = {
delete_relationship: '删除',
},
},
empty_state: {
title: '无关系',
description: '创建关系以连接表',
},
},
dependencies_section: {
dependencies: '依赖关系',
filter: '筛选',
collapse: '全部折叠',
dependency: {
dependency: '依赖',
table: '表',
dependent_table: '依赖视图',
delete_dependency: '删除',
@@ -209,8 +204,8 @@ export const zh_CN: LanguageTranslation = {
},
},
empty_state: {
title: '无依赖',
description: '创建视图以开始',
title: '无关系',
description: '创建关系以开始',
},
},

25
src/i18n/locales/zh_TW.ts
View File

@@ -6,7 +6,7 @@ export const zh_TW: LanguageTranslation = {
new_diagram: '新建',
browse: '瀏覽',
tables: '表格',
relationships: '關係',
refs: 'Refs',
areas: '區域',
dependencies: '相依性',
custom_types: '自定義類型',
@@ -175,12 +175,15 @@ export const zh_TW: LanguageTranslation = {
description: '請新增表格以開始',
},
},
relationships_section: {
relationships: '關聯',
refs_section: {
refs: 'Refs',
filter: '篩選',
add_relationship: '新增關聯',
collapse: '全部摺疊',
add_relationship: '新增關聯',
relationships: '關聯',
dependencies: '相依性',
relationship: {
relationship: '關聯',
primary: '主表格',
foreign: '參照表格',
cardinality: '基數',
@@ -190,16 +193,8 @@ export const zh_TW: LanguageTranslation = {
delete_relationship: '刪除',
},
},
empty_state: {
title: '尚無關聯',
description: '請新增關聯以連接表格',
},
},
dependencies_section: {
dependencies: '相依性',
filter: '篩選',
collapse: '全部摺疊',
dependency: {
dependency: '相依性',
table: '表格',
dependent_table: '相依檢視',
delete_dependency: '刪除',
@@ -209,8 +204,8 @@ export const zh_TW: LanguageTranslation = {
},
},
empty_state: {
title: '尚無相依性',
description: '請建立檢視以開始',
title: '尚無關聯',
description: '請建立關聯以開始',
},
},

2
src/pages/editor-page/canvas/dependency-edge/dependency-edge.tsx
View File

@@ -30,7 +30,7 @@ export const DependencyEdge: React.FC<EdgeProps<DependencyEdgeType>> = ({
const { openDependencyFromSidebar, selectSidebarSection } = useLayout();
const openDependencyInEditor = useCallback(() => {
selectSidebarSection('dependencies');
selectSidebarSection('refs');
openDependencyFromSidebar(id);
}, [id, openDependencyFromSidebar, selectSidebarSection]);

2
src/pages/editor-page/canvas/relationship-edge/relationship-edge.tsx
View File

@@ -41,7 +41,7 @@ export const RelationshipEdge: React.FC<EdgeProps<RelationshipEdgeType>> =
const relationship = data?.relationship;
const openRelationshipInEditor = useCallback(() => {
selectSidebarSection('relationships');
selectSidebarSection('refs');
openRelationshipFromSidebar(id);
}, [id, openRelationshipFromSidebar, selectSidebarSection]);

24
src/pages/editor-page/editor-sidebar/editor-sidebar.tsx
View File

@@ -18,7 +18,7 @@ import {
FolderOpen,
CodeXml,
} from 'lucide-react';
import { SquareStack, Table, Workflow } from 'lucide-react';
import { Table, Workflow } from 'lucide-react';
import { useLayout } from '@/hooks/use-layout';
import { useTranslation } from 'react-i18next';
import { DiscordLogoIcon, TwitterLogoIcon } from '@radix-ui/react-icons';
@@ -30,7 +30,6 @@ import { useChartDB } from '@/hooks/use-chartdb';
import { DatabaseType } from '@/lib/domain/database-type';
import { useDialog } from '@/hooks/use-dialog';
import { Separator } from '@/components/separator/separator';
import { useLocalConfig } from '@/hooks/use-local-config';
export interface SidebarItem {
title: string;
@@ -49,7 +48,6 @@ export const EditorSidebar: React.FC<EditorSidebarProps> = () => {
const { isMd: isDesktop } = useBreakpoint('md');
const { effectiveTheme } = useTheme();
const { databaseType } = useChartDB();
const { showDBViews } = useLocalConfig();
const { openCreateDiagramDialog, openOpenDiagramDialog } = useDialog();
const diagramItems: SidebarItem[] = useMemo(
@@ -95,13 +93,13 @@ export const EditorSidebar: React.FC<EditorSidebarProps> = () => {
active: selectedSidebarSection === 'dbml',
},
{
title: t('editor_sidebar.relationships'),
title: t('editor_sidebar.refs'),
icon: Workflow,
onClick: () => {
showSidePanel();
selectSidebarSection('relationships');
selectSidebarSection('refs');
},
active: selectedSidebarSection === 'relationships',
active: selectedSidebarSection === 'refs',
},
{
title: t('editor_sidebar.areas'),
@@ -112,19 +110,6 @@ export const EditorSidebar: React.FC<EditorSidebarProps> = () => {
},
active: selectedSidebarSection === 'areas',
},
...(showDBViews
? [
{
title: t('editor_sidebar.dependencies'),
icon: SquareStack,
onClick: () => {
showSidePanel();
selectSidebarSection('dependencies');
},
active: selectedSidebarSection === 'dependencies',
},
]
: []),
...(databaseType === DatabaseType.POSTGRESQL
? [
{
@@ -145,7 +130,6 @@ export const EditorSidebar: React.FC<EditorSidebarProps> = () => {
t,
showSidePanel,
databaseType,
showDBViews,
]
);

134
src/pages/editor-page/side-panel/dependencies-section/dependencies-section.tsx
View File

@@ -1,134 +0,0 @@
import React, { useMemo } from 'react';
import { Button } from '@/components/button/button';
import { ListCollapse } from 'lucide-react';
import { Input } from '@/components/input/input';
import { DependencyList } from './dependency-list/dependency-list';
import { useChartDB } from '@/hooks/use-chartdb';
import { EmptyState } from '@/components/empty-state/empty-state';
import { ScrollArea } from '@/components/scroll-area/scroll-area';
import { useTranslation } from 'react-i18next';
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from '@/components/tooltip/tooltip';
import type { DBDependency } from '@/lib/domain/db-dependency';
import { useLayout } from '@/hooks/use-layout';
import { useDiagramFilter } from '@/context/diagram-filter-context/use-diagram-filter';
import { filterDependency } from '@/lib/domain/diagram-filter/filter';
import { defaultSchemas } from '@/lib/data/default-schemas';
export interface DependenciesSectionProps {}
export const DependenciesSection: React.FC<DependenciesSectionProps> = () => {
const { dependencies, getTable, databaseType } = useChartDB();
const { filter } = useDiagramFilter();
const [filterText, setFilterText] = React.useState('');
const { closeAllDependenciesInSidebar } = useLayout();
const { t } = useTranslation();
const filteredDependencies = useMemo(() => {
const filterName: (dependency: DBDependency) => boolean = (
dependency
) => {
if (!filterText?.trim?.()) {
return true;
}
const tableName = getTable(dependency.tableId)?.name ?? '';
const dependentTableName =
getTable(dependency.dependentTableId)?.name ?? '';
return (
tableName.toLowerCase().includes(filterText.toLowerCase()) ||
dependentTableName
.toLowerCase()
.includes(filterText.toLowerCase())
);
};
const filterDependencies: (dependency: DBDependency) => boolean = (
dependency
) =>
filterDependency({
tableA: {
id: dependency.tableId,
schema: dependency.schema,
},
tableB: {
id: dependency.dependentTableId,
schema: dependency.dependentSchema,
},
filter,
options: {
defaultSchema: defaultSchemas[databaseType],
},
});
return dependencies
.filter(filterDependencies)
.filter(filterName)
.sort((a, b) => {
const dependentTableA = getTable(a.dependentTableId);
const tableA = getTable(a.tableId);
const dependentTableB = getTable(b.dependentTableId);
const tableB = getTable(b.tableId);
return `${dependentTableA?.name}${tableA?.name}`.localeCompare(
`${dependentTableB?.name}${tableB?.name}`
);
});
}, [dependencies, filterText, filter, getTable, databaseType]);
return (
<section className="flex flex-1 flex-col overflow-hidden px-2">
<div className="flex items-center justify-between gap-4 py-1">
<div>
<Tooltip>
<TooltipTrigger asChild>
<span>
<Button
variant="ghost"
className="size-8 p-0"
onClick={closeAllDependenciesInSidebar}
>
<ListCollapse className="size-4" />
</Button>
</span>
</TooltipTrigger>
<TooltipContent>
{t('side_panel.dependencies_section.collapse')}
</TooltipContent>
</Tooltip>
</div>
<div className="flex-1">
<Input
type="text"
placeholder={t(
'side_panel.dependencies_section.filter'
)}
className="h-8 w-full focus-visible:ring-0"
value={filterText}
onChange={(e) => setFilterText(e.target.value)}
/>
</div>
</div>
<div className="flex flex-1 flex-col overflow-hidden">
<ScrollArea className="h-full">
{dependencies.length === 0 ? (
<EmptyState
title={t(
'side_panel.dependencies_section.empty_state.title'
)}
description={t(
'side_panel.dependencies_section.empty_state.description'
)}
className="mt-20"
/>
) : (
<DependencyList dependencies={filteredDependencies} />
)}
</ScrollArea>
</div>
</section>
);
};

63
src/pages/editor-page/side-panel/dependencies-section/dependency-list/dependency-list.tsx
View File

@@ -1,63 +0,0 @@
import React, { useCallback } from 'react';
import { Accordion } from '@/components/accordion/accordion';
import { useLayout } from '@/hooks/use-layout';
import type { DBDependency } from '@/lib/domain/db-dependency';
import { DependencyListItem } from './dependency-list-item/dependency-list-item';
export interface DependencyListProps {
dependencies: DBDependency[];
}
export const DependencyList: React.FC<DependencyListProps> = ({
dependencies,
}) => {
const { openDependencyFromSidebar, openedDependencyInSidebar } =
useLayout();
const lastOpenedDependency = React.useRef<string | null>(null);
const refs = dependencies.reduce(
(acc, dependency) => {
acc[dependency.id] = React.createRef();
return acc;
},
{} as Record<string, React.RefObject<HTMLDivElement>>
);
const scrollToDependency = useCallback(
(id: string) =>
refs[id]?.current?.scrollIntoView({
behavior: 'smooth',
block: 'start',
}),
[refs]
);
const handleScrollToDependency = useCallback(() => {
if (
openedDependencyInSidebar &&
lastOpenedDependency.current !== openedDependencyInSidebar
) {
lastOpenedDependency.current = openedDependencyInSidebar;
scrollToDependency(openedDependencyInSidebar);
}
}, [scrollToDependency, openedDependencyInSidebar]);
return (
<Accordion
type="single"
collapsible
className="flex w-full flex-col gap-1"
value={openedDependencyInSidebar}
onValueChange={openDependencyFromSidebar}
onAnimationEnd={handleScrollToDependency}
>
{dependencies.map((dependency) => (
<DependencyListItem
key={dependency.id}
dependency={dependency}
ref={refs[dependency.id]}
/>
))}
</Accordion>
);
};

8
src/pages/editor-page/side-panel/dependencies-section/dependency-list/dependency-list-item/dependency-list-item-content/dependency-list-item-content.tsx → src/pages/editor-page/side-panel/refs-section/refs-list/dependency-list-item/dependency-list-item-content/dependency-list-item-content.tsx
View File

@@ -41,7 +41,7 @@ export const DependencyListItemContent: React.FC<
<FileMinus2 className="size-4 text-subtitle" />
<div className="font-bold text-subtitle">
{t(
'side_panel.dependencies_section.dependency.dependent_table'
'side_panel.refs_section.dependency.dependent_table'
)}
</div>
</div>
@@ -60,9 +60,7 @@ export const DependencyListItemContent: React.FC<
<div className="flex flex-row items-center gap-1">
<FileOutput className="size-4 text-subtitle" />
<div className="font-bold text-subtitle">
{t(
'side_panel.dependencies_section.dependency.table'
)}
{t('side_panel.refs_section.dependency.table')}
</div>
</div>
<Tooltip>
@@ -85,7 +83,7 @@ export const DependencyListItemContent: React.FC<
<Trash2 className="mr-1 size-3.5 text-red-700" />
<div className="text-red-700">
{t(
'side_panel.dependencies_section.dependency.delete_dependency'
'side_panel.refs_section.dependency.delete_dependency'
)}
</div>
</Button>

8
src/pages/editor-page/side-panel/dependencies-section/dependency-list/dependency-list-item/dependency-list-item-header/dependency-list-item-header.tsx → src/pages/editor-page/side-panel/refs-section/refs-list/dependency-list-item/dependency-list-item-header/dependency-list-item-header.tsx
View File

@@ -105,7 +105,7 @@ export const DependencyListItemHeader: React.FC<
<DropdownMenuContent className="w-40">
<DropdownMenuLabel>
{t(
'side_panel.dependencies_section.dependency.dependency_actions.title'
'side_panel.refs_section.dependency.dependency_actions.title'
)}
</DropdownMenuLabel>
<DropdownMenuSeparator />
@@ -115,7 +115,7 @@ export const DependencyListItemHeader: React.FC<
className="flex justify-between !text-red-700"
>
{t(
'side_panel.dependencies_section.dependency.dependency_actions.delete_dependency'
'side_panel.refs_section.dependency.dependency_actions.delete_dependency'
)}
<Trash2 className="size-3.5 text-red-700" />
</DropdownMenuItem>
@@ -127,11 +127,11 @@ export const DependencyListItemHeader: React.FC<
);
return (
<div className="group flex h-11 flex-1 items-center justify-between overflow-hidden">
<div className="group flex h-11 flex-1 items-center justify-between gap-1 overflow-hidden">
<div className="flex min-w-0 flex-1">
<div className="truncate">{dependencyName}</div>
</div>
<div className="flex flex-row-reverse">
<div className="flex flex-row-reverse items-center">
<div>{renderDropDownMenu()}</div>
<div className="flex flex-row-reverse md:hidden md:group-hover:flex">
<ListItemHeaderButton onClick={focusOnDependency}>

0
src/pages/editor-page/side-panel/dependencies-section/dependency-list/dependency-list-item/dependency-list-item.tsx → src/pages/editor-page/side-panel/refs-section/refs-list/dependency-list-item/dependency-list-item.tsx
View File

112
src/pages/editor-page/side-panel/refs-section/refs-list/refs-list.tsx Normal file
View File

@@ -0,0 +1,112 @@
import React, { useCallback, useMemo } from 'react';
import { Accordion } from '@/components/accordion/accordion';
import { useLayout } from '@/hooks/use-layout';
import type { Ref } from '../refs-section';
import { RelationshipListItem } from './relationship-list-item/relationship-list-item';
import { DependencyListItem } from './dependency-list-item/dependency-list-item';
import { Label } from '@/components/label/label';
import { useTranslation } from 'react-i18next';
export interface RefsListProps {
refs: Ref[];
}
export const RefsList: React.FC<RefsListProps> = ({ refs }) => {
const { openRefFromSidebar, openedRefInSidebar } = useLayout();
const lastOpenedRef = React.useRef<string | null>(null);
const { t } = useTranslation();
const itemRefs = refs.reduce(
(acc, ref) => {
acc[ref.id] = React.createRef();
return acc;
},
{} as Record<string, React.RefObject<HTMLDivElement>>
);
const scrollToRef = useCallback(
(id: string) =>
itemRefs[id]?.current?.scrollIntoView({
behavior: 'smooth',
block: 'start',
}),
[itemRefs]
);
const handleScrollToRef = useCallback(() => {
if (
openedRefInSidebar &&
lastOpenedRef.current !== openedRefInSidebar
) {
lastOpenedRef.current = openedRefInSidebar;
scrollToRef(openedRefInSidebar);
}
}, [scrollToRef, openedRefInSidebar]);
const numberOfRelationships = useMemo(
() => refs.filter((ref) => ref.type === 'relationship').length,
[refs]
);
const relationshipsTitle = React.useMemo(
() =>
`${numberOfRelationships} ${t(
'side_panel.refs_section.relationships'
)}`,
[numberOfRelationships, t]
);
const numberOfDependencies = useMemo(
() => refs.filter((ref) => ref.type === 'dependency').length,
[refs]
);
const dependenciesTitle = React.useMemo(
() =>
`${numberOfDependencies} ${t(
'side_panel.refs_section.dependencies'
)}`,
[numberOfDependencies, t]
);
return (
<Accordion
type="single"
collapsible
className="flex w-full flex-col gap-1"
value={openedRefInSidebar}
onValueChange={openRefFromSidebar}
onAnimationEnd={handleScrollToRef}
>
{numberOfRelationships > 0 ? (
<Label className="mt-2 px-2 text-xs font-medium text-muted-foreground">
{relationshipsTitle}
</Label>
) : null}
{refs
.filter((ref) => ref.type === 'relationship')
.map((ref) => (
<RelationshipListItem
key={ref.id}
relationship={ref.relationship!}
ref={itemRefs[ref.id]}
/>
))}
{numberOfDependencies > 0 ? (
<Label className="mt-2 px-2 text-xs font-medium text-muted-foreground">
{dependenciesTitle}
</Label>
) : null}
{refs
.filter((ref) => ref.type === 'dependency')
.map((ref) => (
<DependencyListItem
key={ref.id}
dependency={ref.dependency!}
ref={itemRefs[ref.id]}
/>
))}
</Accordion>
);
};

8
src/pages/editor-page/side-panel/relationships-section/relationship-list/relationship-list-item/relationship-list-item-content/relationship-list-item-content.tsx → src/pages/editor-page/side-panel/refs-section/refs-list/relationship-list-item/relationship-list-item-content/relationship-list-item-content.tsx
View File

@@ -91,7 +91,7 @@ export const RelationshipListItemContent: React.FC<
<FileOutput className="size-4 text-subtitle" />
<div className="font-bold text-subtitle">
{t(
'side_panel.relationships_section.relationship.primary'
'side_panel.refs_section.relationship.primary'
)}
</div>
</div>
@@ -117,7 +117,7 @@ export const RelationshipListItemContent: React.FC<
<FileMinus2 className="size-4 text-subtitle" />
<div className="font-bold text-subtitle">
{t(
'side_panel.relationships_section.relationship.foreign'
'side_panel.refs_section.relationship.foreign'
)}
</div>
</div>
@@ -144,7 +144,7 @@ export const RelationshipListItemContent: React.FC<
<ChevronsLeftRightEllipsis className="size-4 text-subtitle" />
<div className="font-bold text-subtitle">
{t(
'side_panel.relationships_section.relationship.cardinality'
'side_panel.refs_section.relationship.cardinality'
)}
</div>
</div>
@@ -184,7 +184,7 @@ export const RelationshipListItemContent: React.FC<
<Trash2 className="mr-1 size-3.5 text-red-700" />
<div className="text-red-700">
{t(
'side_panel.relationships_section.relationship.delete_relationship'
'side_panel.refs_section.relationship.delete_relationship'
)}
</div>
</Button>

8
src/pages/editor-page/side-panel/relationships-section/relationship-list/relationship-list-item/relationship-list-item-header/relationship-list-item-header.tsx → src/pages/editor-page/side-panel/refs-section/refs-list/relationship-list-item/relationship-list-item-header/relationship-list-item-header.tsx
View File

@@ -133,7 +133,7 @@ export const RelationshipListItemHeader: React.FC<
<DropdownMenuContent className="w-40">
<DropdownMenuLabel>
{t(
'side_panel.relationships_section.relationship.relationship_actions.title'
'side_panel.refs_section.relationship.relationship_actions.title'
)}
</DropdownMenuLabel>
<DropdownMenuSeparator />
@@ -143,7 +143,7 @@ export const RelationshipListItemHeader: React.FC<
className="flex justify-between !text-red-700"
>
{t(
'side_panel.relationships_section.relationship.relationship_actions.delete_relationship'
'side_panel.refs_section.relationship.relationship_actions.delete_relationship'
)}
<Trash2 className="size-3.5 text-red-700" />
</DropdownMenuItem>
@@ -155,7 +155,7 @@ export const RelationshipListItemHeader: React.FC<
);
return (
<div className="group flex h-11 flex-1 items-center justify-between overflow-hidden">
<div className="group flex h-11 flex-1 items-center justify-between gap-1 overflow-hidden">
<div className="flex min-w-0 flex-1">
{editMode ? (
<Input
@@ -172,7 +172,7 @@ export const RelationshipListItemHeader: React.FC<
<div className="truncate">{relationship.name}</div>
)}
</div>
<div className="flex flex-row-reverse">
<div className="flex flex-row-reverse items-center">
{!editMode ? (
<>
<div>{renderDropDownMenu()}</div>

0
src/pages/editor-page/side-panel/relationships-section/relationship-list/relationship-list-item/relationship-list-item.tsx → src/pages/editor-page/side-panel/refs-section/refs-list/relationship-list-item/relationship-list-item.tsx
View File

225
src/pages/editor-page/side-panel/refs-section/refs-section.tsx Normal file
View File

@@ -0,0 +1,225 @@
import React, { useCallback, useMemo } from 'react';
import { Button } from '@/components/button/button';
import { ListCollapse, Workflow } from 'lucide-react';
import { Input } from '@/components/input/input';
import { RefsList } from './refs-list/refs-list';
import { useChartDB } from '@/hooks/use-chartdb';
import type { DBRelationship } from '@/lib/domain/db-relationship';
import type { DBDependency } from '@/lib/domain/db-dependency';
import { useLayout } from '@/hooks/use-layout';
import { EmptyState } from '@/components/empty-state/empty-state';
import { ScrollArea } from '@/components/scroll-area/scroll-area';
import { useTranslation } from 'react-i18next';
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from '@/components/tooltip/tooltip';
import { useDialog } from '@/hooks/use-dialog';
import { useDiagramFilter } from '@/context/diagram-filter-context/use-diagram-filter';
import {
filterRelationship,
filterDependency,
} from '@/lib/domain/diagram-filter/filter';
import { defaultSchemas } from '@/lib/data/default-schemas';
import { useLocalConfig } from '@/hooks/use-local-config';
export type RefType = 'relationship' | 'dependency';
export interface Ref {
id: string;
type: RefType;
relationship?: DBRelationship;
dependency?: DBDependency;
}
export interface RefsSectionProps {}
export const RefsSection: React.FC<RefsSectionProps> = () => {
const { relationships, dependencies, databaseType, getTable } =
useChartDB();
const { filter } = useDiagramFilter();
const [filterText, setFilterText] = React.useState('');
const { closeAllRefsInSidebar } = useLayout();
const { t } = useTranslation();
const { openCreateRelationshipDialog } = useDialog();
const { showDBViews } = useLocalConfig();
const filterInputRef = React.useRef<HTMLInputElement>(null);
const allRefs = useMemo((): Ref[] => {
const relationshipRefs: Ref[] = relationships.map(
(rel) =>
({
id: rel.id,
type: 'relationship',
relationship: rel,
}) satisfies Ref
);
const dependencyRefs: Ref[] = showDBViews
? dependencies.map(
(dep) =>
({
id: dep.id,
type: 'dependency',
dependency: dep,
}) satisfies Ref
)
: [];
return [...relationshipRefs, ...dependencyRefs];
}, [relationships, dependencies, showDBViews]);
const filteredRefs = useMemo(() => {
const filterName = (ref: Ref): boolean => {
if (!filterText?.trim?.()) {
return true;
}
const searchText = filterText.toLowerCase();
if (ref.type === 'relationship') {
const relationship = ref.relationship!;
return relationship.name.toLowerCase().includes(searchText);
} else {
const dependency = ref.dependency!;
const tableName = getTable(dependency.tableId)?.name ?? '';
const dependentTableName =
getTable(dependency.dependentTableId)?.name ?? '';
return (
tableName.toLowerCase().includes(searchText) ||
dependentTableName.toLowerCase().includes(searchText)
);
}
};
const filterByDiagram = (ref: Ref): boolean => {
if (ref.type === 'relationship') {
const relationship = ref.relationship!;
return filterRelationship({
tableA: {
id: relationship.sourceTableId,
schema: relationship.sourceSchema,
},
tableB: {
id: relationship.targetTableId,
schema: relationship.targetSchema,
},
filter,
options: {
defaultSchema: defaultSchemas[databaseType],
},
});
} else {
const dependency = ref.dependency!;
return filterDependency({
tableA: {
id: dependency.tableId,
schema: dependency.schema,
},
tableB: {
id: dependency.dependentTableId,
schema: dependency.dependentSchema,
},
filter,
options: {
defaultSchema: defaultSchemas[databaseType],
},
});
}
};
return allRefs
.filter(filterByDiagram)
.filter(filterName)
.sort((a, b) => {
// Sort relationships before dependencies
if (a.type !== b.type) {
return a.type === 'relationship' ? -1 : 1;
}
// Within same type, sort by name
if (a.type === 'relationship') {
const relA = a.relationship!;
const relB = b.relationship!;
return relA.name.localeCompare(relB.name);
} else {
const depA = a.dependency!;
const depB = b.dependency!;
const tableA = getTable(depA.dependentTableId);
const tableAName = getTable(depA.tableId);
const tableB = getTable(depB.dependentTableId);
const tableBName = getTable(depB.tableId);
return `${tableA?.name}${tableAName?.name}`.localeCompare(
`${tableB?.name}${tableBName?.name}`
);
}
});
}, [allRefs, filterText, filter, databaseType, getTable]);
const handleCreateRelationship = useCallback(async () => {
setFilterText('');
openCreateRelationshipDialog();
}, [openCreateRelationshipDialog, setFilterText]);
return (
<section className="flex flex-1 flex-col overflow-hidden px-2">
<div className="flex items-center justify-between gap-4 py-1">
<div>
<Tooltip>
<TooltipTrigger asChild>
<span>
<Button
variant="ghost"
className="size-8 p-0"
onClick={closeAllRefsInSidebar}
>
<ListCollapse className="size-4" />
</Button>
</span>
</TooltipTrigger>
<TooltipContent>
{t('side_panel.refs_section.collapse')}
</TooltipContent>
</Tooltip>
</div>
<div className="flex-1">
<Input
ref={filterInputRef}
type="text"
placeholder={t('side_panel.refs_section.filter')}
className="h-8 w-full focus-visible:ring-0"
value={filterText}
onChange={(e) => setFilterText(e.target.value)}
/>
</div>
<Button
variant="secondary"
className="h-8 p-2 text-xs"
onClick={handleCreateRelationship}
>
<Workflow className="h-4" />
{t('side_panel.refs_section.add_relationship')}
</Button>
</div>
<div className="flex flex-1 flex-col overflow-hidden">
<ScrollArea className="h-full">
{allRefs.length === 0 ? (
<EmptyState
title={t(
'side_panel.refs_section.empty_state.title'
)}
description={t(
'side_panel.refs_section.empty_state.description'
)}
className="mt-20"
/>
) : (
<RefsList refs={filteredRefs} />
)}
</ScrollArea>
</div>
</section>
);
};

63
src/pages/editor-page/side-panel/relationships-section/relationship-list/relationship-list.tsx
View File

@@ -1,63 +0,0 @@
import React, { useCallback } from 'react';
import { Accordion } from '@/components/accordion/accordion';
import { RelationshipListItem } from './relationship-list-item/relationship-list-item';
import type { DBRelationship } from '@/lib/domain/db-relationship';
import { useLayout } from '@/hooks/use-layout';
export interface RelationshipListProps {
relationships: DBRelationship[];
}
export const RelationshipList: React.FC<RelationshipListProps> = ({
relationships,
}) => {
const { openRelationshipFromSidebar, openedRelationshipInSidebar } =
useLayout();
const lastOpenedRelationship = React.useRef<string | null>(null);
const refs = relationships.reduce(
(acc, relationship) => {
acc[relationship.id] = React.createRef();
return acc;
},
{} as Record<string, React.RefObject<HTMLDivElement>>
);
const scrollToRelationship = useCallback(
(id: string) =>
refs[id]?.current?.scrollIntoView({
behavior: 'smooth',
block: 'start',
}),
[refs]
);
const handleScrollToRelationship = useCallback(() => {
if (
openedRelationshipInSidebar &&
lastOpenedRelationship.current !== openedRelationshipInSidebar
) {
lastOpenedRelationship.current = openedRelationshipInSidebar;
scrollToRelationship(openedRelationshipInSidebar);
}
}, [scrollToRelationship, openedRelationshipInSidebar]);
return (
<Accordion
type="single"
collapsible
className="flex w-full flex-col gap-1"
value={openedRelationshipInSidebar}
onValueChange={openRelationshipFromSidebar}
onAnimationEnd={handleScrollToRelationship}
>
{relationships.map((relationship) => (
<RelationshipListItem
key={relationship.id}
relationship={relationship}
ref={refs[relationship.id]}
/>
))}
</Accordion>
);
};

129
src/pages/editor-page/side-panel/relationships-section/relationships-section.tsx
View File

@@ -1,129 +0,0 @@
import React, { useCallback, useMemo } from 'react';
import { Button } from '@/components/button/button';
import { ListCollapse, Workflow } from 'lucide-react';
import { Input } from '@/components/input/input';
import { RelationshipList } from './relationship-list/relationship-list';
import { useChartDB } from '@/hooks/use-chartdb';
import type { DBRelationship } from '@/lib/domain/db-relationship';
import { useLayout } from '@/hooks/use-layout';
import { EmptyState } from '@/components/empty-state/empty-state';
import { ScrollArea } from '@/components/scroll-area/scroll-area';
import { useTranslation } from 'react-i18next';
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from '@/components/tooltip/tooltip';
import { useDialog } from '@/hooks/use-dialog';
import { useDiagramFilter } from '@/context/diagram-filter-context/use-diagram-filter';
import { filterRelationship } from '@/lib/domain/diagram-filter/filter';
import { defaultSchemas } from '@/lib/data/default-schemas';
export interface RelationshipsSectionProps {}
export const RelationshipsSection: React.FC<RelationshipsSectionProps> = () => {
const { relationships, databaseType } = useChartDB();
const { filter } = useDiagramFilter();
const [filterText, setFilterText] = React.useState('');
const { closeAllRelationshipsInSidebar } = useLayout();
const { t } = useTranslation();
const { openCreateRelationshipDialog } = useDialog();
const filterInputRef = React.useRef<HTMLInputElement>(null);
const filteredRelationships = useMemo(() => {
const filterName: (relationship: DBRelationship) => boolean = (
relationship
) =>
!filterText?.trim?.() ||
relationship.name.toLowerCase().includes(filterText.toLowerCase());
const filterRelationships: (relationship: DBRelationship) => boolean = (
relationship
) =>
filterRelationship({
tableA: {
id: relationship.sourceTableId,
schema: relationship.sourceSchema,
},
tableB: {
id: relationship.targetTableId,
schema: relationship.targetSchema,
},
filter,
options: {
defaultSchema: defaultSchemas[databaseType],
},
});
return relationships.filter(filterRelationships).filter(filterName);
}, [relationships, filterText, filter, databaseType]);
const handleCreateRelationship = useCallback(async () => {
setFilterText('');
openCreateRelationshipDialog();
}, [openCreateRelationshipDialog, setFilterText]);
return (
<section className="flex flex-1 flex-col overflow-hidden px-2">
<div className="flex items-center justify-between gap-4 py-1">
<div>
<Tooltip>
<TooltipTrigger asChild>
<span>
<Button
variant="ghost"
className="size-8 p-0"
onClick={closeAllRelationshipsInSidebar}
>
<ListCollapse className="size-4" />
</Button>
</span>
</TooltipTrigger>
<TooltipContent>
{t('side_panel.relationships_section.collapse')}
</TooltipContent>
</Tooltip>
</div>
<div className="flex-1">
<Input
ref={filterInputRef}
type="text"
placeholder={t(
'side_panel.relationships_section.filter'
)}
className="h-8 w-full focus-visible:ring-0"
value={filterText}
onChange={(e) => setFilterText(e.target.value)}
/>
</div>
<Button
variant="secondary"
className="h-8 p-2 text-xs"
onClick={handleCreateRelationship}
>
<Workflow className="h-4" />
{t('side_panel.relationships_section.add_relationship')}
</Button>
</div>
<div className="flex flex-1 flex-col overflow-hidden">
<ScrollArea className="h-full">
{relationships.length === 0 ? (
<EmptyState
title={t(
'side_panel.relationships_section.empty_state.title'
)}
description={t(
'side_panel.relationships_section.empty_state.description'
)}
className="mt-20"
/>
) : (
<RelationshipList
relationships={filteredRelationships}
/>
)}
</ScrollArea>
</div>
</section>
);
};

20
src/pages/editor-page/side-panel/side-panel.tsx
View File

@@ -8,17 +8,16 @@ import {
SelectValue,
} from '@/components/select/select';
import { TablesSection } from './tables-section/tables-section';
import { RelationshipsSection } from './relationships-section/relationships-section';
import { useLayout } from '@/hooks/use-layout';
import type { SidebarSection } from '@/context/layout-context/layout-context';
import { useTranslation } from 'react-i18next';
import { useChartDB } from '@/hooks/use-chartdb';
import { DependenciesSection } from './dependencies-section/dependencies-section';
import { useBreakpoint } from '@/hooks/use-breakpoint';
import { AreasSection } from './areas-section/areas-section';
import { CustomTypesSection } from './custom-types-section/custom-types-section';
import { DatabaseType } from '@/lib/domain/database-type';
import { DBMLSection } from './dbml-section/dbml-section';
import { RefsSection } from './refs-section/refs-section';
export interface SidePanelProps {}
@@ -49,15 +48,8 @@ export const SidePanel: React.FC<SidePanelProps> = () => {
<SelectItem value="tables">
{t('side_panel.tables_section.tables')}
</SelectItem>
<SelectItem value="relationships">
{t(
'side_panel.relationships_section.relationships'
)}
</SelectItem>
<SelectItem value="dependencies">
{t(
'side_panel.dependencies_section.dependencies'
)}
<SelectItem value="refs">
{t('side_panel.refs_section.refs')}
</SelectItem>
<SelectItem value="areas">
{t('side_panel.areas_section.areas')}
@@ -78,10 +70,8 @@ export const SidePanel: React.FC<SidePanelProps> = () => {
<TablesSection />
) : selectedSidebarSection === 'dbml' ? (
<DBMLSection />
) : selectedSidebarSection === 'relationships' ? (
<RelationshipsSection />
) : selectedSidebarSection === 'dependencies' ? (
<DependenciesSection />
) : selectedSidebarSection === 'refs' ? (
<RefsSection />
) : selectedSidebarSection === 'areas' ? (
<AreasSection />
) : (