add functionality to deal with views and show them last

src/context/storage-context/storage-provider.tsx

@@ -183,10 +183,21 @@ export const StorageProvider: React.FC<React.PropsWithChildren> = ({
     const listTables: StorageContext['listTables'] = async (
         diagramId: string
     ): Promise<DBTable[]> => {
-        return await db.db_tables
+        // Fetch all tables associated with the diagram
+        const tables = await db.db_tables
             .where('diagramId')
             .equals(diagramId)
-            .sortBy('name');
+            .toArray();
+
+        // Sort tables first alphabetically, then views alphabetically
+        return tables.sort((a, b) => {
+            if (a.isView === b.isView) {
+                // Both are either tables or views, so sort alphabetically by name
+                return a.name.localeCompare(b.name);
+            }
+            // If one is a view and the other is not, put tables first
+            return a.isView ? 1 : -1;
+        });
     };
 
     const addRelationship: StorageContext['addRelationship'] = async ({

src/lib/domain/db-table.ts

@@ -6,6 +6,7 @@ import { IndexInfo } from '../data/import-metadata/metadata-types/index-info';
 import { generateId, randomHSLA } from '@/lib/utils';
 import { DBRelationship } from './db-relationship';
 import { PrimaryKeyInfo } from '../data/import-metadata/metadata-types/primary-key-info';
+import { ViewInfo } from '../data/import-metadata/metadata-types/view-info';
 
 export interface DBTable {
     id: string;
@@ -15,6 +16,7 @@ export interface DBTable {
     fields: DBField[];
     indexes: DBIndex[];
     color: string;
+    isView: boolean;
     createdAt: number;
 }
 
@@ -23,11 +25,13 @@ export const createTablesFromMetadata = ({
     columns,
     indexes,
     primaryKeys,
+    views,
 }: {
     tableInfos: TableInfo[];
     columns: ColumnInfo[];
     indexes: IndexInfo[];
     primaryKeys: PrimaryKeyInfo[];
+    views: ViewInfo[];
 }): DBTable[] => {
     return tableInfos.map((tableInfo: TableInfo) => {
         // Filter, make unique, and sort columns based on ordinal_position
@@ -82,6 +86,13 @@ export const createTablesFromMetadata = ({
             })
         );
 
+        // Determine if the current table is a view by checking against viewInfo
+        const isView = views.some(
+            (view) =>
+                view.schema === tableInfo.schema &&
+                view.view_name === tableInfo.table
+        );
+
         // Initial random positions; these will be adjusted later
         return {
             id: generateId(),
@@ -90,7 +101,8 @@ export const createTablesFromMetadata = ({
             y: Math.random() * 800, // Placeholder Y
             fields,
             indexes: dbIndexes,
-            color: randomHSLA(),
+            color: isView ? 'grey' : randomHSLA(),
+            isView: isView,
             createdAt: Date.now(),
         };
     });

src/lib/domain/diagram.ts

@@ -33,6 +33,7 @@ export const loadFromDatabaseMetadata = ({
         columns,
         indexes,
         fk_info: foreignKeys,
+        views: views,
     } = databaseMetadata;
 
     // First pass: Create tables without final positions
@@ -41,6 +42,7 @@ export const loadFromDatabaseMetadata = ({
         columns,
         indexes,
         primaryKeys,
+        views,
     });
 
     // First pass: Create relationships
@@ -52,9 +54,14 @@ export const loadFromDatabaseMetadata = ({
     // Second pass: Adjust table positions based on relationships
     const adjustedTables = adjustTablePositions({ tables, relationships });
 
-    const sortedTables = adjustedTables.sort((a, b) =>
-        a.name.localeCompare(b.name)
-    );
+    const sortedTables = adjustedTables.sort((a, b) => {
+        if (a.isView === b.isView) {
+            // Both are either tables or views, so sort alphabetically by name
+            return a.name.localeCompare(b.name);
+        }
+        // If one is a view and the other is not, put tables first
+        return a.isView ? 1 : -1;
+    });
 
     return {
         id: generateId(),