From 6f7b080e622d0c313e9104a412928de5bb36c77f Mon Sep 17 00:00:00 2001
From: 1ilit <1ilit@proton.me>
Date: Thu, 1 Aug 2024 13:44:22 +0300
Subject: [PATCH] Show field size on the diagram

---
 src/components/EditorCanvas/Table.jsx | 22 ++++++++++++++++++++--
 src/i18n/locales/en.js                |  2 +-
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/components/EditorCanvas/Table.jsx b/src/components/EditorCanvas/Table.jsx
index 2093650..f356df5 100644
--- a/src/components/EditorCanvas/Table.jsx
+++ b/src/components/EditorCanvas/Table.jsx
@@ -17,9 +17,11 @@ import { Popover, Tag, Button, SideSheet } from "@douyinfe/semi-ui";
 import { useLayout, useSettings, useDiagram, useSelect } from "../../hooks";
 import TableInfo from "../EditorSidePanel/TablesTab/TableInfo";
 import { useTranslation } from "react-i18next";
+import { dbToTypes } from "../../data/datatypes";
 
 export default function Table(props) {
   const [hoveredField, setHoveredField] = useState(-1);
+  const { database } = useDiagram();
   const {
     tableData,
     onPointerDown,
@@ -190,7 +192,15 @@ export default function Table(props) {
                   <div className="popover-theme">
                     <div className="flex justify-between items-center pb-2">
                       <p className="me-4 font-bold">{e.name}</p>
-                      <p className="ms-4">{e.type}</p>
+                      <p className="ms-4">
+                        {e.type +
+                          ((dbToTypes[database][e.type].isSized ||
+                            dbToTypes[database][e.type].hasPrecision) &&
+                          e.size &&
+                          e.size !== ""
+                            ? "(" + e.size + ")"
+                            : "")}
+                      </p>
                     </div>
                     <hr />
                     {e.primary && (
@@ -336,7 +346,15 @@ export default function Table(props) {
           ) : (
             <div className="flex gap-1 items-center">
               {fieldData.primary && <IconKeyStroked />}
-              <span>{fieldData.type.substr(0, 12)}</span>
+              <span>
+                {fieldData.type +
+                  ((dbToTypes[database][fieldData.type].isSized ||
+                    dbToTypes[database][fieldData.type].hasPrecision) &&
+                  fieldData.size &&
+                  fieldData.size !== ""
+                    ? "(" + fieldData.size + ")"
+                    : "")}
+              </span>
             </div>
           )}
         </div>
diff --git a/src/i18n/locales/en.js b/src/i18n/locales/en.js
index 31e530b..1351788 100644
--- a/src/i18n/locales/en.js
+++ b/src/i18n/locales/en.js
@@ -122,7 +122,7 @@ const en = {
     values: "Values",
     size: "Size",
     precision: "Precision",
-    set_precision: "Set precision: (size, digits)",
+    set_precision: "Set precision: 'size, digits'",
     use_for_batch_input: "Use , for batch input",
     indices: "Indices",
     add_index: "Add index",