toggle show table by column definition

outerbase · Jan 30, 2025 · eb7897d · eb7897d
1 parent 43b465c
commit eb7897d
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 21 deletions.
diff --git a/src/extensions/data-catalog/data-model-tab.tsx b/src/extensions/data-catalog/data-model-tab.tsx
@@ -1,6 +1,7 @@
 import SchemaNameSelect from "@/components/gui/schema-editor/schema-name-select";
 import { Toolbar, ToolbarFiller } from "@/components/gui/toolbar";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Dialog,
   DialogContent,
@@ -157,13 +158,15 @@ interface DataCatalogTableColumnProps {
   column: DatabaseTableColumn;
   driver: DataCatalogDriver;
   search?: string;
+  hasDefinitionOnly?: boolean;
 }
 
 function DataCatalogTableColumn({
   column,
   table,
   driver,
   search,
+  hasDefinitionOnly,
 }: DataCatalogTableColumnProps) {
   const modelColumn = driver.getColumn(
     table.schemaName,
@@ -176,6 +179,10 @@ function DataCatalogTableColumn({
 
   const [open, setOpen] = useState(false);
 
+  if (hasDefinitionOnly && !definition) {
+    return null;
+  }
+
   return (
     <div key={column.name} className="flex border-t">
       <div className="flex w-[150px] items-center p-2">
@@ -217,28 +224,67 @@ interface DataCatalogTableAccordionProps {
   table: DatabaseTableSchema;
   driver: DataCatalogDriver;
   search?: string;
+  columnName?: string;
+  hasDefinitionOnly?: boolean;
 }
 
 function DataCatalogTableAccordion({
   table,
   driver,
   search,
+  hasDefinitionOnly,
 }: DataCatalogTableAccordionProps) {
+  const modelTable = driver.getTable(table.schemaName, table.tableName!);
+
+  const [definition, setDefinition] = useState(modelTable?.definition || "");
+
+  const onUpdateTable = useCallback(() => {
+    if (
+      definition &&
+      definition.trim() &&
+      definition !== modelTable?.definition
+    ) {
+      driver.updateTable(table?.schemaName, table.tableName!, {
+        definition,
+      });
+    }
+  }, [driver, table, definition, modelTable]);
+
   // Check if any of the column match?
   const matchColumns = useMemo(() => {
-    return !search || search.toLowerCase() === table.tableName!.toLowerCase()
-      ? table.columns
-      : table.columns.filter((column) =>
-          column.name.toLowerCase().includes(search.toLowerCase())
-        );
+    if (!search || search.toLowerCase() === table.tableName!.toLowerCase()) {
+      return table.columns;
+    }
+    return table.columns.filter((column) =>
+      column.name.toLowerCase().includes(search.toLowerCase())
+    );
   }, [search, table]);
 
   const matchedTableName = useMemo(() => {
-    return search
-      ? table.tableName!.toLowerCase().includes(search?.toLowerCase())
-      : true;
+    if (search) {
+      return table.tableName!.toLowerCase().includes(search?.toLowerCase());
+    }
+    return true;
   }, [search, table]);
 
+  // this will work only toggle check box
+  if (hasDefinitionOnly) {
+    const columnsDefinition = table.columns
+      .map((col) => {
+        const modelColumn = driver.getColumn(
+          table.schemaName,
+          table.tableName!,
+          col.name
+        );
+        return !!modelColumn?.definition;
+      })
+      .filter(Boolean);
+
+    if (columnsDefinition.length === 0) {
+      return null;
+    }
+  }
+
   if (!matchedTableName && matchColumns.length === 0 && search) {
     return null;
   }
@@ -247,7 +293,16 @@ function DataCatalogTableAccordion({
     <div className="rounded-lg border text-sm">
       <div className="p-2">
         <div className="font-bold">{table.tableName}</div>
-        <div>No description</div>
+        <input
+          value={definition}
+          placeholder="No description"
+          onBlur={onUpdateTable}
+          onChange={(e) => {
+            e.preventDefault();
+            setDefinition(e.currentTarget.value);
+          }}
+          className="h-[30px] w-[150px] p-0 text-[13px] focus-visible:outline-none"
+        />
       </div>
       {matchColumns.map((column) => {
         return (
@@ -257,6 +312,7 @@ function DataCatalogTableAccordion({
             column={column}
             driver={driver}
             search={search}
+            hasDefinitionOnly={hasDefinitionOnly}
           />
         );
       })}
@@ -267,6 +323,7 @@ function DataCatalogTableAccordion({
 export default function DataCatalogModelTab() {
   const { currentSchemaName, schema } = useSchema();
   const [search, setSearch] = useState("");
+  const [hasDefinitionOnly, setHasDefinitionOnly] = useState(false);
   const [selectedSchema, setSelectedSchema] = useState(currentSchemaName);
 
   const { extensions } = useConfig();
@@ -299,6 +356,13 @@ export default function DataCatalogModelTab() {
             value={selectedSchema}
             onChange={setSelectedSchema}
           />
+          <div className="ml-2 flex items-center gap-2">
+            <Checkbox
+              checked={hasDefinitionOnly}
+              onCheckedChange={() => setHasDefinitionOnly(!hasDefinitionOnly)}
+            />
+            <label className="text-sm">Definition only?</label>
+          </div>
           <ToolbarFiller />
           <div>
             <Input
@@ -319,6 +383,7 @@ export default function DataCatalogModelTab() {
             key={table.tableName}
             table={table}
             driver={driver}
+            hasDefinitionOnly={hasDefinitionOnly}
           />
         ))}
       </div>

diff --git a/src/extensions/data-catalog/driver-inmemory.ts b/src/extensions/data-catalog/driver-inmemory.ts
@@ -1,21 +1,30 @@
-import DataCatalogDriver, { DataCatalogModelColumn, DataCatalogModelColumnInput, DataCatalogModelTable, DataCatalogModelTableInput, DataCatalogSchemas } from "./driver";
+import DataCatalogDriver, {
+  DataCatalogModelColumn,
+  DataCatalogModelColumnInput,
+  DataCatalogModelTable,
+  DataCatalogModelTableInput,
+  DataCatalogSchemas,
+} from "./driver";
 
 interface DataCatalogInmemoryDriverOptions {
   delay?: number;
 }
 
 export default class DataCatalogInmemoryDriver implements DataCatalogDriver {
   protected schemas: DataCatalogSchemas;
-  protected options: DataCatalogInmemoryDriverOptions
+  protected options: DataCatalogInmemoryDriverOptions;
 
-  constructor(schemas: DataCatalogSchemas, options: DataCatalogInmemoryDriverOptions) {
+  constructor(
+    schemas: DataCatalogSchemas,
+    options: DataCatalogInmemoryDriverOptions
+  ) {
     this.schemas = schemas;
     this.options = options;
   }
 
   async load(): Promise<DataCatalogSchemas> {
     if (this.options.delay) {
-      await new Promise(resolve => setTimeout(resolve, this.options.delay));
+      await new Promise((resolve) => setTimeout(resolve, this.options.delay));
     }
 
     return this.schemas;
@@ -28,7 +37,7 @@ export default class DataCatalogInmemoryDriver implements DataCatalogDriver {
     data: DataCatalogModelColumnInput
   ): Promise<DataCatalogModelColumn> {
     if (this.options.delay) {
-      await new Promise(resolve => setTimeout(resolve, this.options.delay));
+      await new Promise((resolve) => setTimeout(resolve, this.options.delay));
     }
 
     const normalizedSchemaName = schemaName.toLowerCase();
@@ -46,15 +55,15 @@ export default class DataCatalogInmemoryDriver implements DataCatalogDriver {
         schemaName: normalizedSchemaName,
         tableName: normalizedTableName,
         columns: {},
-        definition: '',
+        definition: "",
       };
     }
 
     const table = schemas[normalizedTableName];
     if (!table.columns[normalizedColumnName]) {
       table.columns[normalizedColumnName] = {
         name: normalizedColumnName,
-        definition: '',
+        definition: "",
         samples: [],
         hideFromEzql: false,
       };
@@ -71,7 +80,7 @@ export default class DataCatalogInmemoryDriver implements DataCatalogDriver {
     data: DataCatalogModelTableInput
   ): Promise<DataCatalogModelTable> {
     if (this.options.delay) {
-      await new Promise(resolve => setTimeout(resolve, this.options.delay));
+      await new Promise((resolve) => setTimeout(resolve, this.options.delay));
     }
 
     const normalizedSchemaName = schemaName.toLowerCase();
@@ -88,7 +97,7 @@ export default class DataCatalogInmemoryDriver implements DataCatalogDriver {
         schemaName: normalizedSchemaName,
         tableName: normalizedTableName,
         columns: {},
-        definition: '',
+        definition: "",
       };
     }
 
@@ -103,9 +112,18 @@ export default class DataCatalogInmemoryDriver implements DataCatalogDriver {
     tableName: string,
     columnName: string
   ): DataCatalogModelColumn | undefined {
+    const normalizedColumnName = columnName.toLowerCase();
+
+    const table = this.getTable(schemaName, tableName);
+    return table?.columns[normalizedColumnName];
+  }
+
+  getTable(
+    schemaName: string,
+    tableName: string
+  ): DataCatalogModelTable | undefined {
     const normalizedSchemaName = schemaName.toLowerCase();
     const normalizedTableName = tableName.toLowerCase();
-    const normalizedColumnName = columnName.toLowerCase();
 
     if (!this.schemas[normalizedSchemaName]) {
       return;
@@ -118,6 +136,6 @@ export default class DataCatalogInmemoryDriver implements DataCatalogDriver {
     }
 
     const table = schemas[normalizedTableName];
-    return table.columns[normalizedColumnName];
+    return table;
   }
-}
+}
diff --git a/src/extensions/data-catalog/driver.tsx b/src/extensions/data-catalog/driver.tsx
@@ -48,4 +48,9 @@ export default abstract class DataCatalogDriver {
     tableName: string,
     columnName: string
   ): DataCatalogModelColumn | undefined;
+
+  abstract getTable(
+    schemaName: string,
+    tableName: string
+  ): DataCatalogModelTable | undefined;
 }