From 66213bf34624597ca7cddc004344255426d7b7a8 Mon Sep 17 00:00:00 2001
From: KRATIK_BOHRA <kratikbohra5@gmail.com>
Date: Tue, 25 Feb 2025 13:48:09 +0530
Subject: [PATCH 1/4] Add button to toggle showDataType

---
 src/components/EditorCanvas/Table.jsx | 71 ++++++++++++++-------------
 1 file changed, 38 insertions(+), 33 deletions(-)

diff --git a/src/components/EditorCanvas/Table.jsx b/src/components/EditorCanvas/Table.jsx
index 1e656f9a..fa7d31fd 100644
--- a/src/components/EditorCanvas/Table.jsx
+++ b/src/components/EditorCanvas/Table.jsx
@@ -22,6 +22,8 @@ import { isRtl } from "../../i18n/utils/rtl";
 import i18n from "../../i18n/i18n";
 
 export default function Table(props) {
+  // show data type state
+  const [showDataType, setShowDataType] = useState(true);
   const [hoveredField, setHoveredField] = useState(-1);
   const { database } = useDiagram();
   const {
@@ -76,16 +78,14 @@ export default function Table(props) {
         <div
           onDoubleClick={openEditor}
           className={`border-2 hover:border-dashed hover:border-blue-500
-               select-none rounded-lg w-full ${
-                 settings.mode === "light"
-                   ? "bg-zinc-100 text-zinc-800"
-                   : "bg-zinc-800 text-zinc-200"
-               } ${
-                 selectedElement.id === tableData.id &&
-                 selectedElement.element === ObjectType.TABLE
-                   ? "border-solid border-blue-500"
-                   : "border-zinc-500"
-               }`}
+               select-none rounded-lg w-full ${settings.mode === "light"
+              ? "bg-zinc-100 text-zinc-800"
+              : "bg-zinc-800 text-zinc-200"
+            } ${selectedElement.id === tableData.id &&
+              selectedElement.element === ObjectType.TABLE
+              ? "border-solid border-blue-500"
+              : "border-zinc-500"
+            }`}
           style={{ direction: "ltr" }}
         >
           <div
@@ -93,15 +93,24 @@ export default function Table(props) {
             style={{ backgroundColor: tableData.color }}
           />
           <div
-            className={`overflow-hidden font-bold h-[40px] flex justify-between items-center border-b border-gray-400 ${
-              settings.mode === "light" ? "bg-zinc-200" : "bg-zinc-900"
-            }`}
+            className={`overflow-hidden font-bold h-[40px] flex justify-between items-center border-b border-gray-400 ${settings.mode === "light" ? "bg-zinc-200" : "bg-zinc-900"
+              }`}
           >
             <div className=" px-3 overflow-hidden text-ellipsis whitespace-nowrap">
               {tableData.name}
             </div>
             <div className="hidden group-hover:block">
               <div className="flex justify-end items-center mx-2">
+                <Button
+                  type="tertiary"
+                  size="small"
+                  style={{
+                    backgroundColor: "#808080b5",
+                    color: "black",
+                    marginRight: "6px",
+                  }}
+                  onClick={() => setShowDataType(!showDataType)}
+                />
                 <Button
                   icon={<IconEdit />}
                   size="small"
@@ -126,9 +135,8 @@ export default function Table(props) {
                       </div>
                       <div>
                         <strong
-                          className={`${
-                            tableData.indices.length === 0 ? "" : "block"
-                          }`}
+                          className={`${tableData.indices.length === 0 ? "" : "block"
+                            }`}
                         >
                           {t("indices")}:
                         </strong>{" "}
@@ -139,11 +147,10 @@ export default function Table(props) {
                             {tableData.indices.map((index, k) => (
                               <div
                                 key={k}
-                                className={`flex items-center my-1 px-2 py-1 rounded ${
-                                  settings.mode === "light"
-                                    ? "bg-gray-100"
-                                    : "bg-zinc-800"
-                                }`}
+                                className={`flex items-center my-1 px-2 py-1 rounded ${settings.mode === "light"
+                                  ? "bg-gray-100"
+                                  : "bg-zinc-800"
+                                  }`}
                               >
                                 <i className="fa-solid fa-thumbtack me-2 mt-1 text-slate-500"></i>
                                 <div>
@@ -202,8 +209,8 @@ export default function Table(props) {
                         {e.type +
                           ((dbToTypes[database][e.type].isSized ||
                             dbToTypes[database][e.type].hasPrecision) &&
-                          e.size &&
-                          e.size !== ""
+                            e.size &&
+                            e.size !== ""
                             ? "(" + e.size + ")"
                             : "")}
                       </p>
@@ -282,11 +289,10 @@ export default function Table(props) {
   function field(fieldData, index) {
     return (
       <div
-        className={`${
-          index === tableData.fields.length - 1
-            ? ""
-            : "border-b border-gray-400"
-        } group h-[36px] px-2 py-1 flex justify-between items-center gap-1 w-full overflow-hidden`}
+        className={`${index === tableData.fields.length - 1
+          ? ""
+          : "border-b border-gray-400"
+          } group h-[36px] px-2 py-1 flex justify-between items-center gap-1 w-full overflow-hidden`}
         onPointerEnter={(e) => {
           if (!e.isPrimary) return;
 
@@ -308,9 +314,8 @@ export default function Table(props) {
         }}
       >
         <div
-          className={`${
-            hoveredField === index ? "text-zinc-400" : ""
-          } flex items-center gap-2 overflow-hidden`}
+          className={`${hoveredField === index ? "text-zinc-400" : ""
+            } flex items-center gap-2 overflow-hidden`}
         >
           <button
             className="flex-shrink-0 w-[10px] h-[10px] bg-[#2f68adcc] rounded-full"
@@ -362,8 +367,8 @@ export default function Table(props) {
                 {fieldData.type +
                   ((dbToTypes[database][fieldData.type].isSized ||
                     dbToTypes[database][fieldData.type].hasPrecision) &&
-                  fieldData.size &&
-                  fieldData.size !== ""
+                    fieldData.size &&
+                    fieldData.size !== ""
                     ? "(" + fieldData.size + ")"
                     : "")}
               </span>

From 6f10b687217173d6c906a4db37826e83aa97eb3f Mon Sep 17 00:00:00 2001
From: KRATIK_BOHRA <kratikbohra5@gmail.com>
Date: Tue, 25 Feb 2025 13:52:54 +0530
Subject: [PATCH 2/4] condition check to showDataType

---
 src/components/EditorCanvas/Table.jsx | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/components/EditorCanvas/Table.jsx b/src/components/EditorCanvas/Table.jsx
index fa7d31fd..5f5ec541 100644
--- a/src/components/EditorCanvas/Table.jsx
+++ b/src/components/EditorCanvas/Table.jsx
@@ -361,17 +361,21 @@ export default function Table(props) {
             />
           ) : (
             <div className="flex gap-1 items-center">
-              {fieldData.primary && <IconKeyStroked />}
-              {!fieldData.notNull && <span>?</span>}
-              <span>
-                {fieldData.type +
-                  ((dbToTypes[database][fieldData.type].isSized ||
-                    dbToTypes[database][fieldData.type].hasPrecision) &&
-                    fieldData.size &&
-                    fieldData.size !== ""
-                    ? "(" + fieldData.size + ")"
-                    : "")}
-              </span>
+              {showDataType && (
+                <>
+                  {fieldData.primary && <IconKeyStroked />}
+                  {!fieldData.notNull && <span>?</span>}
+                  <span>
+                    {fieldData.type +
+                      ((dbToTypes[database][fieldData.type].isSized ||
+                        dbToTypes[database][fieldData.type].hasPrecision) &&
+                        fieldData.size &&
+                        fieldData.size !== ""
+                        ? "(" + fieldData.size + ")"
+                        : "")}
+                  </span>
+                </>
+              )}
             </div>
           )}
         </div>

From ccfad50e17ec3cc7b5576ba61fb10a23753ea166 Mon Sep 17 00:00:00 2001
From: KRATIK_BOHRA <kratikbohra5@gmail.com>
Date: Tue, 25 Feb 2025 15:36:07 +0530
Subject: [PATCH 3/4] add popover for button usage

---
 src/components/EditorCanvas/Table.jsx | 33 +++++++++++++++++++--------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/components/EditorCanvas/Table.jsx b/src/components/EditorCanvas/Table.jsx
index 5f5ec541..ca7a37c8 100644
--- a/src/components/EditorCanvas/Table.jsx
+++ b/src/components/EditorCanvas/Table.jsx
@@ -101,16 +101,29 @@ export default function Table(props) {
             </div>
             <div className="hidden group-hover:block">
               <div className="flex justify-end items-center mx-2">
-                <Button
-                  type="tertiary"
-                  size="small"
-                  style={{
-                    backgroundColor: "#808080b5",
-                    color: "black",
-                    marginRight: "6px",
-                  }}
-                  onClick={() => setShowDataType(!showDataType)}
-                />
+                <Popover
+                  content={
+                    <div className=" popover-theme flex justify-between items-center pb-2" style={{ direction: "ltr" }}>
+                      <p className="me-4 font-bold">{t("Click to toggle datatype visibility")}</p>
+                    </div>
+                  }
+                  trigger="hover"
+                  position="top"
+                  showArrow
+                >
+                  <Button
+
+                    type="tertiary"
+                    size="small"
+                    // icon={<IconInfoCircle />}
+                    style={{
+                      backgroundColor: "#808080b5",
+                      color: "black",
+                      marginRight: "6px",
+                    }}
+                    onClick={() => setShowDataType(!showDataType)}
+                  />
+                </Popover>
                 <Button
                   icon={<IconEdit />}
                   size="small"

From 985ec06d831e3b62eb93dba50b0fe3c826a0d7b3 Mon Sep 17 00:00:00 2001
From: KRATIK_BOHRA <kratikbohra5@gmail.com>
Date: Tue, 25 Feb 2025 15:42:18 +0530
Subject: [PATCH 4/4] add @douyinfe/semi-icons :- IconEyeOpened and
 IconEyeClosedSolid

---
 src/components/EditorCanvas/Table.jsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/EditorCanvas/Table.jsx b/src/components/EditorCanvas/Table.jsx
index ca7a37c8..c0def7dd 100644
--- a/src/components/EditorCanvas/Table.jsx
+++ b/src/components/EditorCanvas/Table.jsx
@@ -12,6 +12,8 @@ import {
   IconMinus,
   IconDeleteStroked,
   IconKeyStroked,
+  IconEyeOpened,
+  IconEyeClosedSolid
 } from "@douyinfe/semi-icons";
 import { Popover, Tag, Button, SideSheet } from "@douyinfe/semi-ui";
 import { useLayout, useSettings, useDiagram, useSelect } from "../../hooks";
@@ -115,10 +117,10 @@ export default function Table(props) {
 
                     type="tertiary"
                     size="small"
-                    // icon={<IconInfoCircle />}
+                    icon={showDataType ? <IconEyeOpened /> : <IconEyeClosedSolid />}
                     style={{
-                      backgroundColor: "#808080b5",
-                      color: "black",
+                      backgroundColor: "#2f68adb3",
+                      color: "white",
                       marginRight: "6px",
                     }}
                     onClick={() => setShowDataType(!showDataType)}