Fix: display empty state if lineage is empty + fix regex for detecting text inside. MODEL (#1029)

* display empty state for when lineage is empty, fix regex for editor

* restore last selected tab on refresh

Author: mykalmax

web/client/openapi.json

@@ -1445,11 +1445,21 @@
       },
       "TableDiff": {
         "title": "TableDiff",
-        "required": ["schema_diff", "row_diff"],
+        "required": ["schema_diff", "row_diff", "on"],
         "type": "object",
         "properties": {
           "schema_diff": { "$ref": "#/components/schemas/SchemaDiff" },
-          "row_diff": { "$ref": "#/components/schemas/RowDiff" }
+          "row_diff": { "$ref": "#/components/schemas/RowDiff" },
+          "on": {
+            "title": "On",
+            "type": "array",
+            "items": {
+              "maxItems": 2,
+              "minItems": 2,
+              "type": "array",
+              "items": [{ "type": "string" }, { "type": "string" }]
+            }
+          }
         }
       },
       "ValidationError": {

web/client/src/context/editor.ts

@@ -17,6 +17,7 @@ export interface Lineage {
 }
 
 interface EditorStore {
+  storedTabsId?: ID
   storedTabsIds: ID[]
   tabs: Map<ModelFile, EditorTab>
   tab?: EditorTab
@@ -59,14 +60,17 @@ export interface EditorTab {
   preview?: EditorPreview
 }
 
-const [getStoredTabs, setStoredTabs] = useLocalStorage<{ ids: ID[] }>('tabs')
+const [getStoredTabs, setStoredTabs] = useLocalStorage<{ ids: ID[]; id: ID }>(
+  'tabs',
+)
 
 const initialFile = createLocalFile()
 const initialTab: EditorTab = createTab(initialFile)
 const initialTabs = new Map([[initialFile, initialTab]])
 
 export const useStoreEditor = create<EditorStore>((set, get) => ({
-  storedTabsIds: getStoredTabsIds(),
+  storedTabsIds: getStoredTabs()?.ids ?? [],
+  storedTabsId: getStoredTabs()?.id,
   tab: initialTab,
   tabs: initialTabs,
   engine: sqlglotWorker,
@@ -76,14 +80,20 @@ export const useStoreEditor = create<EditorStore>((set, get) => ({
   previewConsole: undefined,
   direction: 'vertical',
   updateStoredTabsIds() {
+    const s = get()
+    const id = s.tab?.file.id
+    const ids = Array.from(get().tabs.values())
+      .filter(tab => tab.file.isRemote)
+      .map(tab => tab.file.id)
+
     setStoredTabs({
-      ids: Array.from(get().tabs.values())
-        .filter(tab => tab.file.isRemote)
-        .map(tab => tab.file.id),
+      id,
+      ids,
     })
 
     set(() => ({
-      storedTabsIds: getStoredTabsIds(),
+      storedTabsId: id,
+      storedTabsIds: ids,
     }))
   },
   refreshTab() {
@@ -174,7 +184,3 @@ function createLocalFile(): ModelFile {
       '-- Create arbitrary SQL queries\n-- and execute them against different environments\n\n',
   })
 }
-
-function getStoredTabsIds(): ID[] {
-  return getStoredTabs()?.ids ?? []
-}

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

@@ -25,6 +25,7 @@ function Editor(): JSX.Element {
 
   const tab = useStoreEditor(s => s.tab)
   const storedTabsIds = useStoreEditor(s => s.storedTabsIds)
+  const storedTabsId = useStoreEditor(s => s.storedTabsId)
   const engine = useStoreEditor(s => s.engine)
   const selectTab = useStoreEditor(s => s.selectTab)
   const createTab = useStoreEditor(s => s.createTab)
@@ -62,7 +63,13 @@ function Editor(): JSX.Element {
   useEffect(() => {
     files.forEach(file => {
       if (storedTabsIds.includes(file.id)) {
-        addTab(createTab(file))
+        const tab = createTab(file)
+
+        if (storedTabsId === file.id) {
+          selectTab(tab)
+        } else {
+          addTab(tab)
+        }
       }
     })
   }, [files])

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

@@ -21,7 +21,7 @@ import { useApiFileByPath, useMutationApiSaveFile } from '~/api'
 import {
   debounceAsync,
   debounceSync,
-  isFalse,
+  isNil,
   isStringEmptyOrNil,
   isStringNotEmpty,
 } from '~/utils'
@@ -360,7 +360,7 @@ const CodeEditor = function CodeEditor({
       value={content}
       extensions={extensionsAll}
       onChange={onChange}
-      readOnly={isFalse(Boolean(onChange))}
+      readOnly={isNil(onChange)}
     />
   )
 }

web/client/src/library/components/editor/extensions/SqlMeshDialect.ts

@@ -78,13 +78,11 @@ export function useSqlMeshExtension(): [
         lang.language.data.of({
           async autocomplete(ctx: CompletionContext) {
             const match = ctx.matchBefore(/\w*$/)?.text.trim() ?? ''
-            const text = ctx.state.doc.toJSON().join('\n')
+            const text = ctx.state.doc.toString()
             const keywordFrom = ctx.matchBefore(/from.+/i)
             const keywordKind = ctx.matchBefore(/kind.+/i)
             const keywordDialect = ctx.matchBefore(/dialect.+/i)
-            const matchModels =
-              text.match(/MODEL \((?:[^)(]+|\((?:[^)(]+|\([^)(]*\))*\))*\)/g) ??
-              []
+            const matchModels = text.match(/MODEL \(([\s\S]*?)\);/gi) ?? []
             const isInsideModel = matchModels
               .filter(str => str.includes(match))
               .map<[number, number]>(str => [
@@ -95,7 +93,6 @@ export function useSqlMeshExtension(): [
                 ([start, end]: [number, number]) =>
                   ctx.pos >= start && ctx.pos <= end,
               )
-
             let suggestions: Completion[] = tables
 
             if (isFalse(isInsideModel)) {

web/client/src/library/components/graph/Graph.tsx

@@ -754,6 +754,7 @@ function ModelColumnLineage({
   const [nodes, setNodes] = useState<Node[]>([])
   const [edges, setEdges] = useState<Edge[]>([])
   const [isBuildingLayout, setIsBuildingLayout] = useState(true)
+  const [isEmpty, setIsEmpty] = useState(true)
 
   const nodeTypes = useMemo(() => ({ model: ModelNode }), [])
 
@@ -775,17 +776,21 @@ function ModelColumnLineage({
 
   useEffect(() => {
     setIsBuildingLayout(isArrayEmpty(nodes) || isArrayEmpty(edges))
+    setIsEmpty(isArrayEmpty(nodesAndEdges.nodes))
+
+    if (isArrayEmpty(nodesAndEdges.nodes)) return
 
     void createGraphLayout(nodesAndEdges)
       .then(layout => {
         toggleEdgeAndNodes(layout.edges, layout.nodes)
-        setIsBuildingLayout(
-          isArrayEmpty(layout.nodes) || isArrayEmpty(layout.edges),
-        )
+        setIsEmpty(isArrayEmpty(layout.nodes))
       })
       .catch(error => {
         handleError?.(error)
       })
+      .finally(() => {
+        setIsBuildingLayout(false)
+      })
   }, [nodesAndEdges])
 
   useEffect(() => {
@@ -863,6 +868,12 @@ function ModelColumnLineage({
             <h3 className="text-md">Building Lineage...</h3>
           </Loading>
         </div>
+      ) : isEmpty ? (
+        <div className="flex justify-center items-center w-full h-full">
+          <Loading className="inline-block">
+            <h3 className="text-md">Empty</h3>
+          </Loading>
+        </div>
       ) : (
         <ReactFlow
           nodes={nodes}

web/client/src/library/pages/ide/IDE.tsx

@@ -24,7 +24,7 @@ import { EnumSize, EnumVariant } from '~/types/enum'
 import { Link, Outlet, useLocation, useNavigate } from 'react-router-dom'
 import { EnumRoutes } from '~/routes'
 import { useStoreFileTree } from '@context/fileTree'
-import { EnumErrorKey, ErrorIDE, useIDE } from './context'
+import { EnumErrorKey, type ErrorIDE, useIDE } from './context'
 import { type Model } from '@api/client'
 import { Button } from '@components/button/Button'
 import { Divider } from '@components/divider/Divider'