feat(diagram): show data type and nullability

packages/web/src/designer/ColumnLine.svelte

@@ -137,6 +137,20 @@
   {#if designerColumn?.isGrouped}
     <FontIcon icon="img group" />
   {/if}
+
+  {#if designer?.style?.showNullability || designer?.style?.showDataType}
+    <div class="space" />
+    {#if designer?.style?.showDataType && column?.dataType}
+      <div class="ml-2">
+        {column?.dataType.toLowerCase()}
+      </div>
+    {/if}
+    {#if designer?.style?.showNullability}
+      <div class="ml-2">
+        {column?.notNull ? 'NOT NULL' : 'NULL'}
+      </div>
+    {/if}
+  {/if}
 </div>
 
 <style>
@@ -149,4 +163,10 @@
   :global(.dbgate-screen) .line.isDragTarget {
     background: var(--theme-bg-gold);
   }
+  .line {
+    display: flex;
+  }
+  .space {
+    flex-grow: 1;
+  }
 </style>

packages/web/src/designer/Designer.svelte

@@ -701,9 +701,43 @@
       });
     });
   }
+
+  const changeStyleFunc = (name, value) => () => {
+    callChange(current => {
+      return {
+        ...current,
+        style: {
+          ...current?.style,
+          [name]: value,
+        },
+      };
+    });
+  };
+
+  function createMenu() {
+    return [
+      menu,
+      settings?.chooseColumnProperties && [
+        { divider: true },
+        {
+          text: 'Column properties',
+          submenu: [
+            {
+              text: `Nullability: ${value?.style?.showNullability ? 'YES' : 'NO'}`,
+              onClick: changeStyleFunc('showNullability', !value?.style?.showNullability),
+            },
+            {
+              text: `Data type: ${value?.style?.showDataType ? 'YES' : 'NO'}`,
+              onClick: changeStyleFunc('showDataType', !value?.style?.showDataType),
+            },
+          ],
+        },
+      ],
+    ];
+  }
 </script>
 
-<div class="wrapper noselect" use:contextMenu={menu}>
+<div class="wrapper noselect" use:contextMenu={createMenu}>
   {#if !(tables?.length > 0)}
     <div class="empty">Drag &amp; drop tables or views from left panel here</div>
   {/if}

packages/web/src/designer/DiagramDesigner.svelte

@@ -20,6 +20,7 @@
     canSelectTables: true,
     allowChangeColor: true,
     appendTableSystemMenu: true,
+    chooseColumnProperties: true,
   }}
   referenceComponent={DiagramDesignerReference}
 />

packages/web/src/designer/QueryDesigner.svelte

@@ -20,6 +20,7 @@
     canSelectTables: false,
     allowChangeColor: false,
     appendTableSystemMenu: false,
+    chooseColumnProperties: false,
   }}
   referenceComponent={QueryDesignerReference}
 />