Feat: Table Diff (#1005)

Author: mykalmax

web/client/openapi.json

@@ -1039,9 +1039,9 @@
       },
       "IntervalUnit": {
         "title": "IntervalUnit",
-        "enum": ["day", "hour", "minute"],
+        "enum": ["year", "month", "day", "hour", "minute"],
         "type": "string",
-        "description": "IntervalUnit is the inferred granularity of an incremental model.\n\nIntervalUnit can be one of 4 types, DAY, HOUR, MINUTE. The unit is inferred\nbased on the cron schedule of a model. The minimum time delta between a sample set of dates\nis used to determine which unit a model's schedule is."
+        "description": "IntervalUnit is the inferred granularity of an incremental model.\n\nIntervalUnit can be one of 5 types, YEAR, MONTH, DAY, HOUR, MINUTE. The unit is inferred\nbased on the cron schedule of a model. The minimum time delta between a sample set of dates\nis used to determine which unit a model's schedule is."
       },
       "LineageColumn": {
         "title": "LineageColumn",
@@ -1112,6 +1112,7 @@
           "tags": { "title": "Tags", "type": "string" },
           "grain": { "title": "Grain", "type": "string" },
           "partitioned_by": { "title": "Partitioned By", "type": "string" },
+          "clustered_by": { "title": "Clustered By", "type": "string" },
           "lookback": { "title": "Lookback", "type": "integer" },
           "cron_prev": {
             "title": "Cron Prev",

web/client/src/api/index.ts

@@ -35,6 +35,9 @@ import {
   evaluateApiCommandsEvaluatePost,
   type EvaluateInput,
   type Model,
+  getTableDiffApiTableDiffGet,
+  type GetTableDiffApiTableDiffGetParams,
+  type TableDiff,
 } from './client'
 import {
   useIDE,
@@ -218,6 +221,18 @@ export function useApiRender(options: RenderInput): UseQueryResult<Query> {
   })
 }
 
+export function useApiTableDiff(
+  options: GetTableDiffApiTableDiffGetParams,
+): UseQueryResult<TableDiff> {
+  return useQuery<TableDiff, ErrorIDE>({
+    queryKey: ['/api/commands/table_diff'],
+    queryFn: async ({ signal }) =>
+      await getTableDiffApiTableDiffGet(options, { signal }),
+    enabled: false,
+    cacheTime: 0,
+  })
+}
+
 export function useApiEvaluate(
   options: EvaluateInput,
 ): UseQueryResult<unknown> {

web/client/src/context/editor.ts

@@ -26,6 +26,7 @@ interface EditorStore {
   previewQuery?: string
   previewTable?: any[]
   previewConsole?: [ErrorKey, ErrorIDE]
+  previewDiff?: any
   direction: 'vertical' | 'horizontal'
   setDirection: (direction: 'vertical' | 'horizontal') => void
   selectTab: (tab?: EditorTab) => void
@@ -38,6 +39,7 @@ interface EditorStore {
   setPreviewQuery: (previewQuery?: string) => void
   setPreviewTable: (previewTable?: any[]) => void
   setPreviewConsole: (previewConsole?: [ErrorKey, ErrorIDE]) => void
+  setPreviewDiff: (previewDiff?: any) => void
 }
 
 interface EditorPreview<TTable = any> {
@@ -78,6 +80,7 @@ export const useStoreEditor = create<EditorStore>((set, get) => ({
   previewQuery: undefined,
   previewTable: undefined,
   previewConsole: undefined,
+  previewDiff: undefined,
   direction: 'vertical',
   updateStoredTabsIds() {
     const s = get()
@@ -162,6 +165,9 @@ export const useStoreEditor = create<EditorStore>((set, get) => ({
   setPreviewConsole(previewConsole) {
     set(() => ({ previewConsole }))
   },
+  setPreviewDiff(previewDiff) {
+    set(() => ({ previewDiff }))
+  },
   setDirection(direction) {
     set(() => ({ direction }))
   },

web/client/src/index.css

@@ -123,7 +123,9 @@
     --color-accent-900: hsla(264, 100%, 8%, 1);
 
     /* Success */
+    --color-success-5: hsla(111, 66%, 55%, 0.05);
     --color-success-10: hsla(111, 66%, 55%, 0.1);
+    --color-success-20: hsla(111, 66%, 55%, 0.2);
     --color-success-100: hsla(92, 90%, 92%, 1);
     --color-success-200: hsla(98, 90%, 84%, 1);
     --color-success-300: hsla(102, 81%, 75%, 1);
@@ -147,7 +149,9 @@
     --color-warning-900: hsla(18, 82%, 26%, 1);
 
     /* Danger */
+    --color-danger-5: hsla(21, 100%, 50%, 0.05);
     --color-danger-10: hsla(21, 100%, 50%, 0.1);
+    --color-danger-20: hsla(21, 100%, 50%, 0.2);
     --color-danger-100: hsla(21, 100%, 93%, 1);
     --color-danger-200: hsla(16, 100%, 86%, 1);
     --color-danger-300: hsla(11, 100%, 78%, 1);

web/client/src/library/components/documentation/Documentation.tsx

@@ -5,11 +5,12 @@ import CodeEditor, {
 import { Disclosure, Tab } from '@headlessui/react'
 import { MinusCircleIcon, PlusCircleIcon } from '@heroicons/react/24/solid'
 import { EnumFileExtensions } from '@models/file'
-import { isFalse, isString, isTrue, toDateFormat } from '@utils/index'
+import { isString, isTrue, toDateFormat } from '@utils/index'
 import clsx from 'clsx'
 import { type ModelSQLMeshModel } from '@models/sqlmesh-model'
 import { ModelColumns } from '@components/graph/Graph'
 import { useLineageFlow } from '@components/graph/context'
+import TabList from '@components/tab/Tab'
 
 const Documentation = function Documentation({
   model,
@@ -92,85 +93,59 @@ const Documentation = function Documentation({
         <Section headline="SQL">
           <CodeEditor.RemoteFile path={model.path}>
             {({ file }) => (
-              <>
-                <Tab.Group defaultIndex={withQuery ? 1 : 0}>
-                  <Tab.List className="w-full whitespace-nowrap px-2 pt-3 flex justify-center items-center">
-                    <Tab
-                      disabled={isFalse(withCode)}
-                      className={({ selected }) =>
-                        clsx(
-                          'inline-block font-medium px-3 py-1 mr-2 last-child:mr-0 rounded-md relative',
-                          selected
-                            ? 'bg-secondary-500 text-secondary-100 cursor-default'
-                            : 'bg-secondary-10 ',
-                          isFalse(withCode)
-                            ? 'opacity-50 cursor-not-allowed'
-                            : 'cursor-pointer',
-                        )
-                      }
-                    >
-                      Source Code
-                    </Tab>
-                    <Tab
-                      disabled={isFalse(withQuery)}
-                      className={({ selected }) =>
-                        clsx(
-                          'inline-block font-medium px-3 py-1 mr-2 last-child:mr-0 rounded-md relative',
-                          selected
-                            ? 'bg-secondary-500 text-secondary-100 cursor-default'
-                            : 'bg-secondary-10 ',
-                          isFalse(withQuery)
-                            ? 'opacity-50 cursor-not-allowed'
-                            : 'cursor-pointer',
-                        )
-                      }
+              <Tab.Group defaultIndex={withQuery ? 1 : 0}>
+                <TabList
+                  list={
+                    [
+                      withCode && 'Source Code',
+                      withQuery && 'Compiled Query',
+                    ].filter(Boolean) as string[]
+                  }
+                  className="!justify-center"
+                />
+
+                <Tab.Panels className="h-full w-full overflow-hidden bg-neutral-10 mt-4 rounded-lg">
+                  <Tab.Panel
+                    unmount={false}
+                    className={clsx(
+                      'flex flex-col w-full h-full relative px-2 overflow-hidden p-2',
+                      'ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2',
+                    )}
+                  >
+                    <CodeEditor.SQLMeshDialect
+                      content={file.content}
+                      type={file.extension}
                     >
-                      Compiled Query
-                    </Tab>
-                  </Tab.List>
-                  <Tab.Panels className="h-full w-full overflow-hidden bg-neutral-10 mt-4 rounded-lg">
-                    <Tab.Panel
-                      unmount={false}
-                      className={clsx(
-                        'flex flex-col w-full h-full relative px-2 overflow-hidden p-2',
-                        'ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2',
+                      {({ extensions, content }) => (
+                        <CodeEditor
+                          extensions={extensions.concat(modelExtensions)}
+                          content={content}
+                          className="text-xs"
+                        />
                       )}
+                    </CodeEditor.SQLMeshDialect>
+                  </Tab.Panel>
+                  <Tab.Panel
+                    unmount={false}
+                    className={clsx(
+                      'w-full h-full ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2 p-2',
+                    )}
+                  >
+                    <CodeEditor.Default
+                      type={EnumFileExtensions.SQL}
+                      content={model.sql ?? ''}
                     >
-                      <CodeEditor.SQLMeshDialect
-                        content={file.content}
-                        type={file.extension}
-                      >
-                        {({ extensions, content }) => (
-                          <CodeEditor
-                            extensions={extensions.concat(modelExtensions)}
-                            content={content}
-                            className="text-xs"
-                          />
-                        )}
-                      </CodeEditor.SQLMeshDialect>
-                    </Tab.Panel>
-                    <Tab.Panel
-                      unmount={false}
-                      className={clsx(
-                        'w-full h-full ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2 p-2',
+                      {({ extensions, content }) => (
+                        <CodeEditor
+                          extensions={extensions.concat(modelExtensions)}
+                          content={content}
+                          className="text-xs"
+                        />
                       )}
-                    >
-                      <CodeEditor.Default
-                        type={EnumFileExtensions.SQL}
-                        content={model.sql ?? ''}
-                      >
-                        {({ extensions, content }) => (
-                          <CodeEditor
-                            extensions={extensions.concat(modelExtensions)}
-                            content={content}
-                            className="text-xs"
-                          />
-                        )}
-                      </CodeEditor.Default>
-                    </Tab.Panel>
-                  </Tab.Panels>
-                </Tab.Group>
-              </>
+                    </CodeEditor.Default>
+                  </Tab.Panel>
+                </Tab.Panels>
+              </Tab.Group>
             )}
           </CodeEditor.RemoteFile>
         </Section>

web/client/src/library/components/editor/Editor.tsx

@@ -132,6 +132,7 @@ function EditorMain({ tab }: { tab: EditorTab }): JSX.Element {
   const engine = useStoreEditor(s => s.engine)
   const previewTable = useStoreEditor(s => s.previewTable)
   const previewConsole = useStoreEditor(s => s.previewConsole)
+  const previewDiff = useStoreEditor(s => s.previewDiff)
   const selectTab = useStoreEditor(s => s.selectTab)
   const createTab = useStoreEditor(s => s.createTab)
   const closeTab = useStoreEditor(s => s.closeTab)
@@ -175,11 +176,12 @@ function EditorMain({ tab }: { tab: EditorTab }): JSX.Element {
   const sizesCodeEditorAndPreview = useMemo(() => {
     const model = models.get(tab.file.path)
     const showPreview =
-      (tab.file.isLocal && [previewTable, previewConsole].some(Boolean)) ||
+      (tab.file.isLocal &&
+        [previewTable, previewConsole, previewDiff].some(Boolean)) ||
       (tab.file.isSQLMeshModel && model != null)
 
     return showPreview ? [70, 30] : [100, 0]
-  }, [tab, models, previewConsole, previewTable])
+  }, [tab, models, previewConsole, previewTable, previewDiff])
 
   const keymaps: KeyBinding[] = useMemo(
     () =>