refine column type , ERD problem, and handling in ScreenDropZone

src/app/(theme)/playground/client/page-client.tsx

@@ -17,6 +17,7 @@ import {
   DropdownMenuSeparator,
 } from "@/components/ui/dropdown-menu";
 import { Button } from "@/components/ui/button";
+import { CommonDialogProvider } from "@/components/common-dialog";
 
 function OverlayAround({
   x,
@@ -324,10 +325,12 @@ export default function PlaygroundEditorBody({
 
   return (
     <>
-      <Script src="/sqljs/sql-wasm.js" onReady={onReady} />
-      <ScreenDropZone onFileDrop={setHandler} />
-      <Onboarding />
-      {dom}
+      <CommonDialogProvider>
+        <Script src="/sqljs/sql-wasm.js" onReady={onReady} />
+        <ScreenDropZone onFileDrop={setHandler} />
+        <Onboarding />
+        {dom}
+      </CommonDialogProvider>
     </>
   );
 }

src/components/gui/schema-editor/column-type-selector.tsx

@@ -98,9 +98,22 @@ export default function ColumnTypeSelector({
       {
         return {
           ...group,
-          suggestions: group.suggestions.filter((type) => {
-            return type.name.toLowerCase().startsWith(parsedType.toLowerCase());
-          }),
+          suggestions: group.suggestions
+            .filter((type) => {
+              return (
+                type.name.toLowerCase().startsWith(parsedType.toLowerCase()) &&
+                type.name !== "uuid"
+              );
+            })
+            .map((x) => {
+              if (["enum", "set"].includes(x.name)) {
+                return {
+                  ...x,
+                  parameters: [{ name: "", default: "'Y','N'" }],
+                };
+              }
+              return x;
+            }),
         };
       }
     })

src/components/gui/tabs/relational-diagram-tab/erd-table-column.tsx

@@ -11,7 +11,7 @@ export default function ERDTableColumn({
 }) {
   return (
     <TableRow className="group relative text-xs">
-      <TableCell className="p-0 pl-0 pr-6 font-light h-[30px] text-sm pl-2 font-mono">
+      <TableCell className="p-0 pr-6 font-light h-[30px] text-sm pl-2 font-mono">
         <BaseHandle
           id={column.title}
           type="target"
@@ -23,11 +23,11 @@ export default function ERDTableColumn({
             {column.pk && <Key size={15} color={"rgb(153 27 27)"} />}
             {column.fk && <Key size={15} color={"rgb(245 158 11)"} />}
           </div>
-          <div>{column.title}</div>
+          <div className="max-w-[120px] truncate">{column.title}</div>
         </div>
       </TableCell>
       <TableCell className="p-0 pr-0 text-right font-thin h-[30px] text-sm">
-        <div className="h-[30px] flex items-center justify-end pr-2 font-mono text-muted-foreground">
+        <div className="h-[30px] flex items-center justify-end pr-2 font-mono text-muted-foreground max-w-[75px] truncate">
           {column.type}
         </div>
         <BaseHandle

src/components/gui/tabs/relational-diagram-tab/index.tsx

@@ -129,16 +129,16 @@ function mapSchema(
 
         initialEdges.push({
           type: "smoothstep",
-          markerStart: {
+          markerEnd: {
             type: MarkerType.ArrowClosed,
             width: 14,
             height: 14,
           },
           id: `${item.name}-${constraint.foreignKey.foreignTableName}`,
-          target: item.name,
-          source: constraint.foreignKey.foreignTableName || "",
-          targetHandle: columnName,
-          sourceHandle: constraint.foreignKey.foreignColumns
+          source: item.name,
+          target: constraint.foreignKey.foreignTableName || "",
+          sourceHandle: columnName,
+          targetHandle: constraint.foreignKey.foreignColumns
             ? constraint.foreignKey.foreignColumns[0]
             : "",
           animated: true,
@@ -203,12 +203,16 @@ function mapSchema(
   // Rearrange the nodes with relationship
   // We need to find the position
   const relationshipRightPosition =
-    (Math.max(...layoutRelationship.nodes.map((x) => x.position.x)) ?? 0) +
-    NODE_MARGIN +
-    MAX_NODE_WIDTH;
+    layoutRelationship.nodes.length === 0
+      ? 0
+      : (Math.max(...layoutRelationship.nodes.map((x) => x.position.x)) ?? 0) +
+        NODE_MARGIN +
+        MAX_NODE_WIDTH;
 
   const relationshipTopPosition =
-    Math.min(...layoutRelationship.nodes.map((x) => x.position.y)) ?? 0;
+    layoutRelationship.nodes.length === 0
+      ? 0
+      : Math.min(...layoutRelationship.nodes.map((x) => x.position.y)) ?? 0;
 
   // Calculate estimate area of the nodes without relationship
   const area =

src/components/screen-dropzone.tsx

@@ -1,12 +1,15 @@
 "use client";
 
 import { useEffect } from "react";
+import { useCommonDialog } from "./common-dialog";
 
 interface Props {
   onFileDrop: (handler: FileSystemFileHandle) => void;
 }
 
 export default function ScreenDropZone({ onFileDrop }: Props) {
+  const { showDialog } = useCommonDialog();
+
   useEffect(() => {
     const dropEventHandler = (e: DragEvent) => {
       e.preventDefault();
@@ -17,7 +20,15 @@ export default function ScreenDropZone({ onFileDrop }: Props) {
       if (!fileList) return;
       if (fileList.length === 0) return;
 
-      (fileList[0] as any).getAsFileSystemHandle().then(onFileDrop);
+      try {
+        (fileList[0] as any).getAsFileSystemHandle().then(onFileDrop);
+      } catch (error) {
+        showDialog({
+          destructive: true,
+          title: "Warning",
+          content: "Your browser are not support. please use another browser.",
+        });
+      }
     };
 
     const dragEventHandler = (e: DragEvent) => {
@@ -33,7 +44,7 @@ export default function ScreenDropZone({ onFileDrop }: Props) {
       window.document.removeEventListener("dragover", dragEventHandler);
       window.document.removeEventListener("drop", dropEventHandler);
     };
-  }, [onFileDrop]);
+  }, [onFileDrop, showDialog]);
 
   return <></>;
 }