From 34c1f372912022d2fefc7cde2e5ba1b383e94b49 Mon Sep 17 00:00:00 2001
From: "@roth-dev" <roth.dev.ops@gmail.com>
Date: Thu, 30 Jan 2025 12:14:47 +0700
Subject: [PATCH 1/4] fix save columns data empty space

---
 .../data-catalog/data-model-tab.tsx           | 65 +++++++++++++------
 1 file changed, 46 insertions(+), 19 deletions(-)

diff --git a/src/extensions/data-catalog/data-model-tab.tsx b/src/extensions/data-catalog/data-model-tab.tsx
index 79bd05df..10088388 100644
--- a/src/extensions/data-catalog/data-model-tab.tsx
+++ b/src/extensions/data-catalog/data-model-tab.tsx
@@ -1,5 +1,5 @@
 import SchemaNameSelect from "@/components/gui/schema-editor/schema-name-select";
-import { Toolbar } from "@/components/gui/toolbar";
+import { Toolbar, ToolbarFiller } from "@/components/gui/toolbar";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -10,6 +10,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { useConfig } from "@/context/config-provider";
@@ -63,6 +64,34 @@ function DataCatalogTableColumnModal({
       .finally(() => setSampleLoading(false));
   }, [databaseDriver, columnName, schemaName, tableName]);
 
+  const onSaveUpdateColumn = useCallback(() => {
+    setLoading(true);
+
+    driver
+      .updateColumn(schemaName, tableName, columnName, {
+        definition,
+        samples:
+          samples && samples.trim()
+            ? samples.split(",").map((s) => s.trim())
+            : [],
+        hideFromEzql: modelColumn?.hideFromEzql ?? false,
+      })
+      .then()
+      .finally(() => {
+        setLoading(false);
+        onClose();
+      });
+  }, [
+    driver,
+    modelColumn,
+    samples,
+    columnName,
+    onClose,
+    schemaName,
+    tableName,
+    definition,
+  ]);
+
   return (
     <>
       <DialogHeader>
@@ -113,24 +142,7 @@ function DataCatalogTableColumnModal({
       </div>
 
       <DialogFooter>
-        <Button
-          disabled={loading}
-          onClick={() => {
-            setLoading(true);
-
-            driver
-              .updateColumn(schemaName, tableName, columnName, {
-                definition,
-                samples: samples.split(",").map((s) => s.trim()),
-                hideFromEzql: modelColumn?.hideFromEzql ?? false,
-              })
-              .then()
-              .finally(() => {
-                setLoading(false);
-                onClose();
-              });
-          }}
-        >
+        <Button disabled={loading} onClick={onSaveUpdateColumn}>
           {loading && <LucideLoader className="mr-1 h-4 w-4 animate-spin" />}
           Save
         </Button>
@@ -227,6 +239,7 @@ function DataCatalogTableAccordion({
 
 export default function DataCatalogModelTab() {
   const { currentSchemaName, schema } = useSchema();
+  const [search, setSearch] = useState("");
   const [selectedSchema, setSelectedSchema] = useState(currentSchemaName);
 
   const { extensions } = useConfig();
@@ -236,6 +249,10 @@ export default function DataCatalogModelTab() {
 
   const driver = dataCatalogExtension?.driver;
 
+  const onChangeText = useCallback((value: string) => {
+    setSearch(value);
+  }, []);
+
   const currentSchema = useMemo(() => {
     if (!selectedSchema) return [];
     const result = (schema[selectedSchema] || [])
@@ -259,6 +276,16 @@ export default function DataCatalogModelTab() {
             value={selectedSchema}
             onChange={setSelectedSchema}
           />
+          <ToolbarFiller />
+          <div>
+            <Input
+              value={search}
+              onChange={(e) => {
+                onChangeText(e.currentTarget.value);
+              }}
+              placeholder="Search tables, columns"
+            />
+          </div>
         </Toolbar>
       </div>
 

From 43b465c4546e640de2bbbc74a387fd1bf6de9337 Mon Sep 17 00:00:00 2001
From: "@roth-dev" <roth.dev.ops@gmail.com>
Date: Thu, 30 Jan 2025 14:20:39 +0700
Subject: [PATCH 2/4] search tables & columns

---
 src/components/listview/index.tsx             | 32 ++--------------
 src/components/ui/highlight-text.tsx          | 29 ++++++++++++++
 .../data-catalog/data-model-tab.tsx           | 38 +++++++++++++++----
 3 files changed, 64 insertions(+), 35 deletions(-)
 create mode 100644 src/components/ui/highlight-text.tsx

diff --git a/src/components/listview/index.tsx b/src/components/listview/index.tsx
index 17206b45..3e2be101 100644
--- a/src/components/listview/index.tsx
+++ b/src/components/listview/index.tsx
@@ -19,6 +19,7 @@ import React, {
   useRef,
   useState,
 } from "react";
+import HighlightText from "../ui/highlight-text";
 
 export interface ListViewItem<T = unknown> {
   key: string;
@@ -57,31 +58,6 @@ interface ListViewRendererProps<T> extends ListViewProps<T> {
   contextOpen: boolean;
 }
 
-function Highlight({ text, highlight }: { text: string; highlight?: string }) {
-  if (!highlight) return <span>{text}</span>;
-
-  const regex = new RegExp(
-    "(" + (highlight ?? "").replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + ")",
-    "i"
-  );
-
-  const splitedText = text.split(regex);
-
-  return (
-    <span>
-      {splitedText.map((text, idx) => {
-        return text.toLowerCase() === (highlight ?? "").toLowerCase() ? (
-          <span key={idx} className="bg-yellow-300 text-black">
-            {text}
-          </span>
-        ) : (
-          <span key={idx}>{text}</span>
-        );
-      })}
-    </span>
-  );
-}
-
 function Indentation({ depth }: { depth: number }) {
   if (depth <= 0) return null;
 
@@ -219,7 +195,7 @@ function renderList<T>(props: ListViewRendererProps<T>): React.ReactElement {
                       {item.iconBadgeColor && (
                         <div
                           className={cn(
-                            "absolute -bottom-0.5 -right-0.5 h-2 w-2 rounded-full",
+                            "absolute -right-0.5 -bottom-0.5 h-2 w-2 rounded-full",
                             item.iconBadgeColor
                           )}
                         ></div>
@@ -228,7 +204,7 @@ function renderList<T>(props: ListViewRendererProps<T>): React.ReactElement {
                   )}
 
                   <div className="line-clamp-1 flex-1 text-xs">
-                    <Highlight text={item.name} highlight={highlight} />
+                    <HighlightText text={item.name} highlight={highlight} />
                     {item.badgeContent && (
                       <span
                         className={cn(
@@ -242,7 +218,7 @@ function renderList<T>(props: ListViewRendererProps<T>): React.ReactElement {
                   </div>
 
                   {item.progressBarValue && item.progressBarMax && (
-                    <div className="relative flex h-full w-[50px] items-center text-muted-foreground">
+                    <div className="text-muted-foreground relative flex h-full w-[50px] items-center">
                       <div
                         className="h-[20px] rounded-sm border border-gray-200 bg-gray-100 dark:border-gray-700 dark:bg-gray-800"
                         style={{
diff --git a/src/components/ui/highlight-text.tsx b/src/components/ui/highlight-text.tsx
new file mode 100644
index 00000000..8097a1cc
--- /dev/null
+++ b/src/components/ui/highlight-text.tsx
@@ -0,0 +1,29 @@
+"use client";
+interface Props {
+  text: string;
+  highlight?: string;
+}
+export default function HighlightText({ text, highlight }: Props) {
+  if (!highlight) return <span>{text}</span>;
+
+  const regex = new RegExp(
+    "(" + (highlight ?? "").replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + ")",
+    "i"
+  );
+
+  const splitedText = text.split(regex);
+
+  return (
+    <span>
+      {splitedText.map((text, idx) => {
+        return text.toLowerCase() === (highlight ?? "").toLowerCase() ? (
+          <span key={idx} className="bg-yellow-300 text-black">
+            {text}
+          </span>
+        ) : (
+          <span key={idx}>{text}</span>
+        );
+      })}
+    </span>
+  );
+}
diff --git a/src/extensions/data-catalog/data-model-tab.tsx b/src/extensions/data-catalog/data-model-tab.tsx
index 10088388..1948eca9 100644
--- a/src/extensions/data-catalog/data-model-tab.tsx
+++ b/src/extensions/data-catalog/data-model-tab.tsx
@@ -10,6 +10,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
+import HighlightText from "@/components/ui/highlight-text";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
@@ -155,12 +156,14 @@ interface DataCatalogTableColumnProps {
   table: DatabaseTableSchema;
   column: DatabaseTableColumn;
   driver: DataCatalogDriver;
+  search?: string;
 }
 
 function DataCatalogTableColumn({
   column,
   table,
   driver,
+  search,
 }: DataCatalogTableColumnProps) {
   const modelColumn = driver.getColumn(
     table.schemaName,
@@ -175,7 +178,9 @@ function DataCatalogTableColumn({
 
   return (
     <div key={column.name} className="flex border-t">
-      <div className="w-[175px] p-2">{column.name}</div>
+      <div className="flex w-[150px] items-center p-2">
+        <HighlightText text={column.name} highlight={search} />
+      </div>
       <div className="text-muted-foreground flex-1 p-2">
         {definition || "No description"}
       </div>
@@ -211,25 +216,47 @@ function DataCatalogTableColumn({
 interface DataCatalogTableAccordionProps {
   table: DatabaseTableSchema;
   driver: DataCatalogDriver;
+  search?: string;
 }
 
 function DataCatalogTableAccordion({
   table,
   driver,
+  search,
 }: DataCatalogTableAccordionProps) {
+  // 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())
+        );
+  }, [search, table]);
+
+  const matchedTableName = useMemo(() => {
+    return search
+      ? table.tableName!.toLowerCase().includes(search?.toLowerCase())
+      : true;
+  }, [search, table]);
+
+  if (!matchedTableName && matchColumns.length === 0 && search) {
+    return null;
+  }
+
   return (
     <div className="rounded-lg border text-sm">
       <div className="p-2">
         <div className="font-bold">{table.tableName}</div>
         <div>No description</div>
       </div>
-      {table.columns.map((column) => {
+      {matchColumns.map((column) => {
         return (
           <DataCatalogTableColumn
             key={column.name}
             table={table}
             column={column}
             driver={driver}
+            search={search}
           />
         );
       })}
@@ -249,10 +276,6 @@ export default function DataCatalogModelTab() {
 
   const driver = dataCatalogExtension?.driver;
 
-  const onChangeText = useCallback((value: string) => {
-    setSearch(value);
-  }, []);
-
   const currentSchema = useMemo(() => {
     if (!selectedSchema) return [];
     const result = (schema[selectedSchema] || [])
@@ -281,7 +304,7 @@ export default function DataCatalogModelTab() {
             <Input
               value={search}
               onChange={(e) => {
-                onChangeText(e.currentTarget.value);
+                setSearch(e.currentTarget.value);
               }}
               placeholder="Search tables, columns"
             />
@@ -292,6 +315,7 @@ export default function DataCatalogModelTab() {
       <div className="flex flex-1 flex-col gap-4 overflow-y-auto p-4">
         {currentSchema.map((table) => (
           <DataCatalogTableAccordion
+            search={search}
             key={table.tableName}
             table={table}
             driver={driver}

From eb7897d540e25cd1eec2e8c01782326d56f342fe Mon Sep 17 00:00:00 2001
From: "@roth-dev" <roth.dev.ops@gmail.com>
Date: Thu, 30 Jan 2025 21:42:39 +0700
Subject: [PATCH 3/4] toggle show table by column definition

---
 .../data-catalog/data-model-tab.tsx           | 83 +++++++++++++++++--
 .../data-catalog/driver-inmemory.ts           | 42 +++++++---
 src/extensions/data-catalog/driver.tsx        |  5 ++
 3 files changed, 109 insertions(+), 21 deletions(-)

diff --git a/src/extensions/data-catalog/data-model-tab.tsx b/src/extensions/data-catalog/data-model-tab.tsx
index 1948eca9..3e1d85eb 100644
--- 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,6 +158,7 @@ interface DataCatalogTableColumnProps {
   column: DatabaseTableColumn;
   driver: DataCatalogDriver;
   search?: string;
+  hasDefinitionOnly?: boolean;
 }
 
 function DataCatalogTableColumn({
@@ -164,6 +166,7 @@ function DataCatalogTableColumn({
   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
index f2aefef8..23d156e6 100644
--- a/src/extensions/data-catalog/driver-inmemory.ts
+++ b/src/extensions/data-catalog/driver-inmemory.ts
@@ -1,4 +1,10 @@
-import DataCatalogDriver, { DataCatalogModelColumn, DataCatalogModelColumnInput, DataCatalogModelTable, DataCatalogModelTableInput, DataCatalogSchemas } from "./driver";
+import DataCatalogDriver, {
+  DataCatalogModelColumn,
+  DataCatalogModelColumnInput,
+  DataCatalogModelTable,
+  DataCatalogModelTableInput,
+  DataCatalogSchemas,
+} from "./driver";
 
 interface DataCatalogInmemoryDriverOptions {
   delay?: number;
@@ -6,16 +12,19 @@ interface DataCatalogInmemoryDriverOptions {
 
 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,7 +55,7 @@ export default class DataCatalogInmemoryDriver implements DataCatalogDriver {
         schemaName: normalizedSchemaName,
         tableName: normalizedTableName,
         columns: {},
-        definition: '',
+        definition: "",
       };
     }
 
@@ -54,7 +63,7 @@ export default class DataCatalogInmemoryDriver implements DataCatalogDriver {
     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;
   }
-}
\ No newline at end of file
+}
diff --git a/src/extensions/data-catalog/driver.tsx b/src/extensions/data-catalog/driver.tsx
index fd69d637..e0c1631e 100644
--- 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;
 }

From bc07a60bf041ab8419c5e25c0c39798e87d9b788 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Fri, 31 Jan 2025 08:09:38 +0700
Subject: [PATCH 4/4] change the data catalog icon

---
 src/extensions/data-catalog/index.tsx   | 6 +++---
 src/extensions/data-catalog/sidebar.tsx | 5 ++++-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/extensions/data-catalog/index.tsx b/src/extensions/data-catalog/index.tsx
index 6e4c84ce..0029a451 100644
--- a/src/extensions/data-catalog/index.tsx
+++ b/src/extensions/data-catalog/index.tsx
@@ -1,7 +1,7 @@
 import { StudioExtension } from "@/core/extension-base";
 import { StudioExtensionContext } from "@/core/extension-manager";
 import { createTabExtension } from "@/core/extension-tab";
-import { LucideDatabase, LucideNotepadText } from "lucide-react";
+import { Book } from "@phosphor-icons/react";
 import DataCatalogModelTab from "./data-model-tab";
 import DataCatalogDriver from "./driver";
 import DataCatalogSidebar from "./sidebar";
@@ -11,7 +11,7 @@ export const dataCatalogModelTab = createTabExtension({
   key: () => "data-catalog-model",
   name: "Data Model",
   generate: () => ({
-    icon: LucideNotepadText,
+    icon: Book,
     title: "Data Model",
     component: <DataCatalogModelTab />,
   }),
@@ -29,7 +29,7 @@ export default class DataCatalogExtension extends StudioExtension {
     studio.registerSidebar({
       key: "data-catalog",
       name: "Data Catalog",
-      icon: <LucideDatabase />,
+      icon: <Book className="h-6 w-6" />,
       content: <DataCatalogSidebar />,
     });
 
diff --git a/src/extensions/data-catalog/sidebar.tsx b/src/extensions/data-catalog/sidebar.tsx
index c8eec4c4..f7182144 100644
--- a/src/extensions/data-catalog/sidebar.tsx
+++ b/src/extensions/data-catalog/sidebar.tsx
@@ -1,12 +1,15 @@
-import { SidebarMenuItem } from "@/components/sidebar-menu";
+import { SidebarMenuHeader, SidebarMenuItem } from "@/components/sidebar-menu";
+import { Database } from "@phosphor-icons/react";
 import { dataCatalogModelTab } from ".";
 
 export default function DataCatalogSidebar() {
   return (
     <div className="flex flex-1 flex-col">
+      <SidebarMenuHeader text="Data Catalog" />
       <SidebarMenuItem
         text="Data Model"
         onClick={() => dataCatalogModelTab.open({})}
+        icon={Database}
       />
     </div>
   );