From ae5a3b477cfc90fd13d015f625cca8a9e362fe3c Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Mon, 26 Feb 2024 15:14:40 -0330
Subject: [PATCH] Add a legend

---
 .../SchemaFlowHandler/SchemaFlowLegend.tsx    | 38 +++++++++++++++++++
 .../SchemaFlowHandler/TableNode.tsx           |  2 +-
 .../components/SchemaFlowHandler/index.tsx    |  2 +
 3 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 apps/database-new/components/SchemaFlowHandler/SchemaFlowLegend.tsx

diff --git a/apps/database-new/components/SchemaFlowHandler/SchemaFlowLegend.tsx b/apps/database-new/components/SchemaFlowHandler/SchemaFlowLegend.tsx
new file mode 100644
index 00000000000..dc231608686
--- /dev/null
+++ b/apps/database-new/components/SchemaFlowHandler/SchemaFlowLegend.tsx
@@ -0,0 +1,38 @@
+import { DiamondIcon, Fingerprint, Hash, Key } from 'lucide-react'
+
+const SchemaFlowLegend = () => {
+  return (
+    <div className="absolute bottom-0 left-0 border-t flex justify-center px-1 py-2 shadow-md bg-surface-100 w-full z-10">
+      {/* <h3 className="text-xs font-bold">Legend</h3> */}
+      <ul className="flex flex-wrap  items-center justify-center gap-2">
+        <li className="flex items-center text-xs font-mono gap-1">
+          <Key size={12} strokeWidth={1} className="flex-shrink-0 text-light" />
+          Primary key
+        </li>
+        <li className="flex items-center text-xs font-mono gap-1">
+          <Hash size={12} strokeWidth={1} className="flex-shrink-0 text-light" />
+          Identity
+        </li>
+        <li className="flex items-center text-xs font-mono gap-1">
+          <Fingerprint size={12} strokeWidth={1} className="flex-shrink-0 text-light" />
+          Unique
+        </li>
+        <li className="flex items-center text-xs font-mono gap-1">
+          <DiamondIcon size={12} strokeWidth={1} className="flex-shrink-0 text-light" />
+          Nullable
+        </li>
+        <li className="flex items-center text-xs font-mono gap-1">
+          <DiamondIcon
+            size={12}
+            strokeWidth={1}
+            fill="currentColor"
+            className="flex-shrink-0 text-light"
+          />
+          Non-Nullable
+        </li>
+      </ul>
+    </div>
+  )
+}
+
+export default SchemaFlowLegend
diff --git a/apps/database-new/components/SchemaFlowHandler/TableNode.tsx b/apps/database-new/components/SchemaFlowHandler/TableNode.tsx
index 3b5073cc15e..3ddd05fdbd1 100644
--- a/apps/database-new/components/SchemaFlowHandler/TableNode.tsx
+++ b/apps/database-new/components/SchemaFlowHandler/TableNode.tsx
@@ -42,7 +42,7 @@ const TableNode = ({ data, targetPosition, sourcePosition }: NodeProps<TableNode
         </div>
       ) : (
         <div
-          className="border border-[0.5px] overflow-hidden rounded-[4px] shadow-sm"
+          className="border-[0.5px] overflow-hidden rounded-[4px] shadow-sm"
           style={{ width: NODE_WIDTH / 2 }}
         >
           <header
diff --git a/apps/database-new/components/SchemaFlowHandler/index.tsx b/apps/database-new/components/SchemaFlowHandler/index.tsx
index f9d96b516b7..db96990c626 100644
--- a/apps/database-new/components/SchemaFlowHandler/index.tsx
+++ b/apps/database-new/components/SchemaFlowHandler/index.tsx
@@ -14,6 +14,7 @@ import { PostgresTable } from '@/lib/types'
 import { parseTables } from '@/lib/utils'
 import { getGraphDataFromTables } from './SchemaFlow.utils'
 import TableNode from './TableNode'
+import SchemaFlowLegend from './SchemaFlowLegend'
 
 interface SchemaGraphProps {
   tables?: PostgresTable[]
@@ -81,6 +82,7 @@ const SchemaFlowHandler = ({ content }: SchemaGraphProps) => {
               color={'inherit'}
             />
           )}
+          <SchemaFlowLegend />
         </ReactFlow>
       </div>
     </>