From a6d2c106bb76fdf4f45062b6ad7f996290ccd7e6 Mon Sep 17 00:00:00 2001
From: KRATIK_BOHRA <kratikbohra5@gmail.com>
Date: Sun, 16 Mar 2025 04:43:52 +0530
Subject: [PATCH 1/3] showDatatype setting added in view control panel

---
 src/components/EditorCanvas/Table.jsx        | 26 +++++++++++---------
 src/components/EditorHeader/ControlPanel.jsx | 12 +++++++++
 src/context/SettingsContext.jsx              |  1 +
 src/i18n/locales/en.js                       |  1 +
 4 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/src/components/EditorCanvas/Table.jsx b/src/components/EditorCanvas/Table.jsx
index 1e656f9a..159b8e38 100644
--- a/src/components/EditorCanvas/Table.jsx
+++ b/src/components/EditorCanvas/Table.jsx
@@ -356,17 +356,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>
+              {settings.showDataTypes && (
+                <>
+                  {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>
diff --git a/src/components/EditorHeader/ControlPanel.jsx b/src/components/EditorHeader/ControlPanel.jsx
index 40afb068..e1b48f49 100644
--- a/src/components/EditorHeader/ControlPanel.jsx
+++ b/src/components/EditorHeader/ControlPanel.jsx
@@ -1211,6 +1211,18 @@ export default function ControlPanel({
         function: resetView,
         shortcut: "Ctrl+R",
       },
+      show_datatype: {
+        state: settings.showDataTypes ? (
+          <i className="bi bi-toggle-on" />
+        ) : (
+          <i className="bi bi-toggle-off" />
+        ),
+        function: () => {
+            showDataTypes: !prevSettings.showDataTypes
+          }));
+        },
+        shortcut: "Ctrl+Shift+D",
+      },
       show_grid: {
         state: settings.showGrid ? (
           <i className="bi bi-toggle-on" />
diff --git a/src/context/SettingsContext.jsx b/src/context/SettingsContext.jsx
index 3c70f6db..19cd69ec 100644
--- a/src/context/SettingsContext.jsx
+++ b/src/context/SettingsContext.jsx
@@ -5,6 +5,7 @@ const defaultSettings = {
   strictMode: false,
   showFieldSummary: true,
   showGrid: true,
+  showDataTypes: true,
   mode: "light",
   autosave: true,
   panning: true,
diff --git a/src/i18n/locales/en.js b/src/i18n/locales/en.js
index f4e6886a..22d0f54f 100644
--- a/src/i18n/locales/en.js
+++ b/src/i18n/locales/en.js
@@ -49,6 +49,7 @@ const en = {
     field_details: "Field details",
     reset_view: "Reset view",
     show_grid: "Show grid",
+    show_datatype: "Show datatype",
     show_cardinality: "Show cardinality",
     theme: "Theme",
     light: "Light",

From 4cddbee583c9d435cc65c17d3aba2af6b772261b Mon Sep 17 00:00:00 2001
From: KRATIK_BOHRA <kratikbohra5@gmail.com>
Date: Sun, 16 Mar 2025 04:50:35 +0530
Subject: [PATCH 2/3] removed shortcut

can be discussed later
---
 src/components/EditorHeader/ControlPanel.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/EditorHeader/ControlPanel.jsx b/src/components/EditorHeader/ControlPanel.jsx
index e1b48f49..7b0de607 100644
--- a/src/components/EditorHeader/ControlPanel.jsx
+++ b/src/components/EditorHeader/ControlPanel.jsx
@@ -1221,7 +1221,6 @@ export default function ControlPanel({
             showDataTypes: !prevSettings.showDataTypes
           }));
         },
-        shortcut: "Ctrl+Shift+D",
       },
       show_grid: {
         state: settings.showGrid ? (

From f7c2fe3bb5180dfaa70cd956d87760c4734b064b Mon Sep 17 00:00:00 2001
From: KRATIK_BOHRA <kratikbohra5@gmail.com>
Date: Mon, 17 Mar 2025 03:03:23 +0530
Subject: [PATCH 3/3] fixed linting issue and made sure the condition check is
 above div element

in table.jsx code
in the else part im directly returning the element by keeping a check  for settings.showDataTypes?
which helps to not add empty element

for setSetting issue
I used the similar code used just above the snippet and modified it
---
 src/components/EditorCanvas/Table.jsx        | 31 +++++++++-----------
 src/components/EditorHeader/ControlPanel.jsx |  6 ++--
 2 files changed, 16 insertions(+), 21 deletions(-)

diff --git a/src/components/EditorCanvas/Table.jsx b/src/components/EditorCanvas/Table.jsx
index 159b8e38..91600b39 100644
--- a/src/components/EditorCanvas/Table.jsx
+++ b/src/components/EditorCanvas/Table.jsx
@@ -354,25 +354,22 @@ export default function Table(props) {
               icon={<IconMinus />}
               onClick={() => deleteField(fieldData, tableData.id)}
             />
-          ) : (
+          ) : settings.showDataTypes ? (
             <div className="flex gap-1 items-center">
-              {settings.showDataTypes && (
-                <>
-                  {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>
-                </>
-              )}
+              {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>
-          )}
+          ) : null
+          }
         </div>
       </div>
     );
diff --git a/src/components/EditorHeader/ControlPanel.jsx b/src/components/EditorHeader/ControlPanel.jsx
index 7b0de607..47ed69dc 100644
--- a/src/components/EditorHeader/ControlPanel.jsx
+++ b/src/components/EditorHeader/ControlPanel.jsx
@@ -1217,10 +1217,8 @@ export default function ControlPanel({
         ) : (
           <i className="bi bi-toggle-off" />
         ),
-        function: () => {
-            showDataTypes: !prevSettings.showDataTypes
-          }));
-        },
+        function: () =>
+          setSettings((prev) => ({ ...prev, showDataTypes: !prev.showDataTypes })),
       },
       show_grid: {
         state: settings.showGrid ? (