Add autocomplete to table/column names

michaelmior · michaelmior · commit 22b4f13a3a6b · 2025-09-04T12:32:41.000-04:00
diff --git a/src/SqlAutocomplete.js b/src/SqlAutocomplete.js
@@ -0,0 +1,284 @@
+// @flow
+import * as React from 'react';
+import type {Node} from 'react';
+
+type AutocompleteItem = {
+  text: string,
+  type: 'table' | 'column',
+  table?: string,
+};
+
+type Props = {
+  items: Array<AutocompleteItem>,
+  selectedIndex: number,
+  position: {top: number, left: number},
+  onSelect: (item: AutocompleteItem) => void,
+  onClose: () => void,
+};
+
+/**
+ * Dropdown component for SQL autocomplete suggestions
+ */
+class SqlAutocompleteDropdown extends React.Component<Props> {
+  render(): Node {
+    const {items, selectedIndex, position, onSelect} = this.props;
+
+    if (items.length === 0) {
+      return null;
+    }
+
+    return (
+      <div
+        className="sql-autocomplete-dropdown"
+        style={{
+          position: 'fixed', // Changed from 'absolute' to 'fixed' to position relative to viewport
+          top: position.top,
+          left: position.left,
+          backgroundColor: 'white',
+          border: '1px solid #ccc',
+          borderRadius: '4px',
+          boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+          maxHeight: '200px',
+          overflowY: 'auto',
+          zIndex: 1000,
+          minWidth: '150px',
+        }}
+      >
+        {items.map((item, index) => (
+          <div
+            key={`${item.type}-${item.text}`}
+            className={`sql-autocomplete-item ${
+              index === selectedIndex ? 'selected' : ''
+            }`}
+            style={{
+              padding: '8px 12px',
+              cursor: 'pointer',
+              backgroundColor: index === selectedIndex ? '#e6f3ff' : 'white',
+              borderBottom:
+                index < items.length - 1 ? '1px solid #eee' : 'none',
+            }}
+            onClick={() => onSelect(item)}
+          >
+            <span
+              style={{
+                fontWeight: item.type === 'table' ? 'bold' : 'normal',
+                color: item.type === 'table' ? '#0066cc' : '#333',
+              }}
+            >
+              {item.text}
+            </span>
+            {item.type === 'column' && item.table && (
+              <span
+                style={{
+                  marginLeft: '8px',
+                  fontSize: '12px',
+                  color: '#666',
+                }}
+              >
+                ({item.table})
+              </span>
+            )}
+          </div>
+        ))}
+      </div>
+    );
+  }
+}
+
+/**
+ * Parse SQL text to detect table/column references being typed
+ */
+export function parseForAutocomplete(
+  text: string,
+  cursorPosition: number
+): {
+  prefix: string,
+  context: 'table' | 'column' | null,
+  needsTablePrefix?: boolean,
+} {
+  // Get text up to cursor position
+  const beforeCursor = text.slice(0, cursorPosition);
+
+  // Find the current word being typed (ignoring trailing spaces)
+  const wordMatch = beforeCursor.trimEnd().match(/[\w.]*$/);
+  const currentWord = wordMatch ? wordMatch[0] : '';
+
+  // If cursor is after spaces and there's no current word, look for the last word
+  let actualWord = currentWord;
+  if (!currentWord && beforeCursor.endsWith(' ')) {
+    // Look for the word before the spaces
+    const trimmed = beforeCursor.trimEnd();
+    const lastWordMatch = trimmed.match(/[\w.]*$/);
+    actualWord = lastWordMatch ? lastWordMatch[0] : '';
+  }
+
+  // Check if we're in a context where table/column suggestions make sense
+  const upperText = beforeCursor.toUpperCase();
+
+  // Common SQL keywords that typically precede table names
+  const tableKeywords = ['FROM', 'JOIN', 'INTO', 'UPDATE'];
+  // Common SQL keywords that typically precede column names
+  const columnKeywords = [
+    'SELECT',
+    'WHERE',
+    'GROUP BY',
+    'ORDER BY',
+    'HAVING',
+    'ON',
+  ];
+
+  // Check if we're currently typing a keyword (don't autocomplete keywords)
+  const allKeywords = [...tableKeywords, ...columnKeywords];
+  for (const keyword of allKeywords) {
+    if (keyword.startsWith(actualWord.toUpperCase()) && actualWord.length > 0) {
+      return {prefix: '', context: null};
+    }
+  }
+
+  // Check for table context - must be right after a table keyword
+  for (const keyword of tableKeywords) {
+    const keywordIndex = upperText.lastIndexOf(keyword);
+    if (keywordIndex >= 0) {
+      const afterKeyword = beforeCursor
+        .slice(keywordIndex + keyword.length)
+        .trim();
+      // Check if the cursor is within the first word after the keyword
+      const wordsAfter = afterKeyword.split(/\s+/).filter((w) => w.length > 0);
+      if (wordsAfter.length <= 1) {
+        // We're in table context - return the actual word being typed
+        return {prefix: actualWord, context: 'table'};
+      }
+    }
+  }
+
+  // Check for column context - must be after column keyword but not after table keyword
+  for (const keyword of columnKeywords) {
+    const keywordIndex = upperText.lastIndexOf(keyword);
+    if (keywordIndex >= 0) {
+      const afterKeyword = beforeCursor.slice(keywordIndex + keyword.length);
+
+      // Check if there's a table keyword after this column keyword
+      let hasTableKeywordAfter = false;
+      for (const tk of tableKeywords) {
+        const tableKeywordIndex = afterKeyword.toUpperCase().lastIndexOf(tk);
+        if (tableKeywordIndex >= 0) {
+          // Check if we're past the table keyword and its table name
+          const afterTableKeyword = afterKeyword
+            .slice(tableKeywordIndex + tk.length)
+            .trim();
+          const tableWords = afterTableKeyword
+            .split(/\s+/)
+            .filter((w) => w.length > 0);
+          if (tableWords.length === 0) {
+            // We're still naming the table
+            hasTableKeywordAfter = true;
+          } else if (
+            tableWords.length === 1 &&
+            afterTableKeyword.startsWith(actualWord)
+          ) {
+            // We're still typing the table name
+            hasTableKeywordAfter = true;
+          }
+          break;
+        }
+      }
+
+      if (!hasTableKeywordAfter) {
+        // Check if it's a qualified column name (table.column)
+        if (actualWord.includes('.')) {
+          const parts = actualWord.split('.');
+          return {
+            prefix: parts[1] || '',
+            context: 'column',
+            needsTablePrefix: true,
+          };
+        }
+        return {prefix: actualWord, context: 'column'};
+      }
+    }
+  }
+
+  return {prefix: '', context: null};
+}
+
+/**
+ * Generate autocomplete suggestions based on available tables and columns
+ */
+export function generateSuggestions(
+  prefix: string,
+  context: 'table' | 'column' | null,
+  types: {[string]: Array<string>},
+  needsTablePrefix?: boolean
+): Array<AutocompleteItem> {
+  if (!context || !prefix) {
+    return [];
+  }
+
+  const lowerPrefix = prefix.toLowerCase();
+  const suggestions: Array<AutocompleteItem> = [];
+
+  if (context === 'table') {
+    // Suggest table names
+    Object.keys(types).forEach((tableName) => {
+      if (tableName.toLowerCase().startsWith(lowerPrefix)) {
+        suggestions.push({
+          text: tableName,
+          type: 'table',
+        });
+      }
+    });
+  } else if (context === 'column') {
+    if (needsTablePrefix) {
+      // For qualified column names (table.column), suggest columns from specific table
+      // Extract table name from current word before the dot
+      const currentWord = prefix;
+      const dotIndex = currentWord.lastIndexOf('.');
+      if (dotIndex > 0) {
+        const tableName = currentWord.slice(0, dotIndex);
+        const columnPrefix = currentWord.slice(dotIndex + 1).toLowerCase();
+
+        if (types[tableName]) {
+          types[tableName].forEach((column) => {
+            if (column.toLowerCase().startsWith(columnPrefix)) {
+              suggestions.push({
+                text: `${tableName}.${column}`,
+                type: 'column',
+                table: tableName,
+              });
+            }
+          });
+        }
+      }
+    } else {
+      // Suggest all columns from all tables
+      Object.entries(types).forEach(([tableName, columns]) => {
+        columns.forEach((column) => {
+          if (column.toLowerCase().startsWith(lowerPrefix)) {
+            suggestions.push({
+              text: column,
+              type: 'column',
+              table: tableName,
+            });
+          }
+        });
+      });
+
+      // Also suggest qualified column names
+      Object.entries(types).forEach(([tableName, columns]) => {
+        if (tableName.toLowerCase().startsWith(lowerPrefix)) {
+          columns.forEach((column) => {
+            suggestions.push({
+              text: `${tableName}.${column}`,
+              type: 'column',
+              table: tableName,
+            });
+          });
+        }
+      });
+    }
+  }
+
+  return suggestions.slice(0, 10); // Limit to 10 suggestions
+}
+
+export default SqlAutocompleteDropdown;
diff --git a/src/SqlAutocomplete.test.js b/src/SqlAutocomplete.test.js
@@ -0,0 +1,85 @@
+// @flow
+import {parseForAutocomplete, generateSuggestions} from './SqlAutocomplete';
+
+describe('SqlAutocomplete', () => {
+  const types = {
+    Doctor: ['id', 'firstName', 'lastName', 'salary', 'departmentId'],
+    Department: ['id', 'name', 'budget'],
+    Patient: ['id', 'firstName', 'lastName', 'dateOfBirth'],
+  };
+
+  describe('parseForAutocomplete', () => {
+    test('detects table context after FROM', () => {
+      const result = parseForAutocomplete('SELECT * FROM Doc', 17);
+      expect(result.context).toBe('table');
+      expect(result.prefix).toBe('Doc');
+    });
+
+    test('detects table context after JOIN', () => {
+      const result = parseForAutocomplete('SELECT * FROM Doctor JOIN Dep', 29);
+      expect(result.context).toBe('table');
+      expect(result.prefix).toBe('Dep');
+    });
+
+    test('detects column context after SELECT', () => {
+      const result = parseForAutocomplete('SELECT first', 12);
+      expect(result.context).toBe('column');
+      expect(result.prefix).toBe('first');
+    });
+
+    test('detects column context after WHERE', () => {
+      const result = parseForAutocomplete('SELECT * FROM Doctor WHERE sal', 30);
+      expect(result.context).toBe('column');
+      expect(result.prefix).toBe('sal');
+    });
+
+    test('detects qualified column context', () => {
+      const result = parseForAutocomplete('SELECT Doctor.first', 19);
+      expect(result.context).toBe('column');
+      expect(result.prefix).toBe('first');
+      expect(result.needsTablePrefix).toBe(true);
+    });
+
+    test('returns null context for non-relevant positions', () => {
+      const result = parseForAutocomplete('SELECT * FROM Doctor', 10);
+      expect(result.context).toBeNull();
+    });
+  });
+
+  describe('generateSuggestions', () => {
+    test('suggests table names', () => {
+      const suggestions = generateSuggestions('Doc', 'table', types);
+      expect(suggestions).toHaveLength(1);
+      expect(suggestions[0].text).toBe('Doctor');
+      expect(suggestions[0].type).toBe('table');
+    });
+
+    test('suggests column names', () => {
+      const suggestions = generateSuggestions('first', 'column', types);
+      expect(suggestions.length).toBeGreaterThan(0);
+      expect(suggestions.some((s) => s.text === 'firstName')).toBe(true);
+      expect(suggestions.every((s) => s.type === 'column')).toBe(true);
+    });
+
+    test('suggests qualified column names for specific table', () => {
+      const suggestions = generateSuggestions(
+        'Doctor.first',
+        'column',
+        types,
+        true
+      );
+      expect(suggestions.length).toBeGreaterThan(0);
+      expect(suggestions.some((s) => s.text === 'Doctor.firstName')).toBe(true);
+    });
+
+    test('limits suggestions to 10 items', () => {
+      const suggestions = generateSuggestions('', 'column', types);
+      expect(suggestions.length).toBeLessThanOrEqual(10);
+    });
+
+    test('returns empty array for no matches', () => {
+      const suggestions = generateSuggestions('xyz', 'table', types);
+      expect(suggestions).toHaveLength(0);
+    });
+  });
+});
diff --git a/src/SqlEditor.js b/src/SqlEditor.js
