diff --git a/src/components/EditorSidePanel/SidePanel.jsx b/src/components/EditorSidePanel/SidePanel.jsx
index 0168940..168c1f6 100644
--- a/src/components/EditorSidePanel/SidePanel.jsx
+++ b/src/components/EditorSidePanel/SidePanel.jsx
@@ -1,6 +1,14 @@
import { Tabs, TabPane } from "@douyinfe/semi-ui";
import { Tab } from "../../data/constants";
-import { useLayout, useSelect, useDiagram } from "../../hooks";
+import {
+ useLayout,
+ useSelect,
+ useDiagram,
+ useAreas,
+ useNotes,
+ useEnums,
+ useTypes,
+} from "../../hooks";
import RelationshipsTab from "./RelationshipsTab/RelationshipsTab";
import TypesTab from "./TypesTab/TypesTab";
import Issues from "./Issues";
@@ -17,24 +25,40 @@ import i18n from "../../i18n/i18n";
export default function SidePanel({ width, resize, setResize }) {
const { layout } = useLayout();
const { selectedElement, setSelectedElement } = useSelect();
- const { database } = useDiagram();
+ const { database, tablesCount, relationshipsCount } = useDiagram();
+ const { areasCount } = useAreas();
+ const { notesCount } = useNotes();
+ const { typesCount } = useTypes();
+ const { enumsCount } = useEnums();
const { t } = useTranslation();
const tabList = useMemo(() => {
const tabs = [
- { tab: t("tables"), itemKey: Tab.TABLES, component: },
{
- tab: t("relationships"),
+ tab: `${t("tables")} (${tablesCount})`,
+ itemKey: Tab.TABLES,
+ component: ,
+ },
+ {
+ tab: `${t("relationships")} (${relationshipsCount})`,
itemKey: Tab.RELATIONSHIPS,
component: ,
},
- { tab: t("subject_areas"), itemKey: Tab.AREAS, component: },
- { tab: t("notes"), itemKey: Tab.NOTES, component: },
+ {
+ tab: `${t("subject_areas")} (${areasCount})`,
+ itemKey: Tab.AREAS,
+ component: ,
+ },
+ {
+ tab: `${t("notes")} (${notesCount})`,
+ itemKey: Tab.NOTES,
+ component: ,
+ },
];
if (databases[database].hasTypes) {
tabs.push({
- tab: t("types"),
+ tab: `${t("types")} (${typesCount})`,
itemKey: Tab.TYPES,
component: ,
});
@@ -42,14 +66,23 @@ export default function SidePanel({ width, resize, setResize }) {
if (databases[database].hasEnums) {
tabs.push({
- tab: t("enums"),
+ tab: `${t("enums")} (${enumsCount})`,
itemKey: Tab.ENUMS,
component: ,
});
}
return isRtl(i18n.language) ? tabs.reverse() : tabs;
- }, [t, database]);
+ }, [
+ t,
+ database,
+ tablesCount,
+ relationshipsCount,
+ areasCount,
+ typesCount,
+ enumsCount,
+ notesCount,
+ ]);
return (
diff --git a/src/context/AreasContext.jsx b/src/context/AreasContext.jsx
index cc020ba..a275777 100644
--- a/src/context/AreasContext.jsx
+++ b/src/context/AreasContext.jsx
@@ -92,7 +92,14 @@ export default function AreasContextProvider({ children }) {
return (
{children}
diff --git a/src/context/DiagramContext.jsx b/src/context/DiagramContext.jsx
index ffa4997..440f8a9 100644
--- a/src/context/DiagramContext.jsx
+++ b/src/context/DiagramContext.jsx
@@ -262,6 +262,8 @@ export default function DiagramContextProvider({ children }) {
deleteRelationship,
database,
setDatabase,
+ tablesCount: tables.length,
+ relationshipsCount: relationships.length,
}}
>
{children}
diff --git a/src/context/EnumsContext.jsx b/src/context/EnumsContext.jsx
index 1f7f599..8e3f46e 100644
--- a/src/context/EnumsContext.jsx
+++ b/src/context/EnumsContext.jsx
@@ -74,6 +74,7 @@ export default function EnumsContextProvider({ children }) {
addEnum,
updateEnum,
deleteEnum,
+ enumsCount: enums.length,
}}
>
{children}
diff --git a/src/context/NotesContext.jsx b/src/context/NotesContext.jsx
index 712b0d1..6a7a346 100644
--- a/src/context/NotesContext.jsx
+++ b/src/context/NotesContext.jsx
@@ -91,7 +91,14 @@ export default function NotesContextProvider({ children }) {
return (
{children}
diff --git a/src/context/TypesContext.jsx b/src/context/TypesContext.jsx
index c74dcbe..24f7843 100644
--- a/src/context/TypesContext.jsx
+++ b/src/context/TypesContext.jsx
@@ -75,6 +75,7 @@ export default function TypesContextProvider({ children }) {
addType,
updateType,
deleteType,
+ typesCount: types.length,
}}
>
{children}