Skip to content

Commit 82b0f3f

Browse files
mykalmaxmykalmax
authored
Fix: styling bugs and incorrect spelling (#694)
1 parent 49aa308 commit 82b0f3f

10 files changed

Lines changed: 89 additions & 63 deletions

File tree

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ export default function Editor(): JSX.Element {
112112
</div>
113113
) : (
114114
<SplitPane
115-
className="h-full w-full"
115+
className="h-full w-full overflow-hidden"
116116
sizes={sizesCodeEditorAndPreview}
117117
direction="vertical"
118118
minSize={0}

‎web/client/src/library/components/editor/EditorFooter.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ export default function EditorFooter({ tab }: { tab: EditorTab }): JSX.Element {
7373
</EditorIndicator.Selector>
7474
</EditorIndicator>
7575
)}
76-
{tab.file.isSQLMeshModel && tab.dialect != null && (
76+
{tab.file.isSQLMeshModel && tab.dialect != null && tab.dialect !== '' && (
7777
<EditorIndicator
7878
className="mr-2"
7979
text="Dialect"

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ export function useSqlMeshExtension(): [
6262
sqlglotWorker.removeEventListener('message', handler)
6363
}
6464

65-
handler = function getTokensFromSqlGlot(e: MessageEvent): void {
65+
handler = function getTokensFromSQLGlot(e: MessageEvent): void {
6666
if (e.data.topic === 'parse') {
6767
// TODO: set parsed tree and use it to improve editor autompletion
6868
}

‎web/client/src/library/components/editor/extensions/index.ts‎

Lines changed: 41 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -21,36 +21,14 @@ export function SqlMeshModel(models: Map<string, Model>): Extension {
2121
return ViewPlugin.fromClass(
2222
class SqlMeshModelView {
2323
decorations: DecorationSet = Decoration.set([])
24+
constructor(readonly view: EditorView) {
25+
this.decorations = getDecorations(models, view)
26+
}
27+
2428
update(viewUpdate: ViewUpdate): void {
25-
const decorations: any[] = []
26-
27-
for (const range of viewUpdate.view.visibleRanges) {
28-
syntaxTree(viewUpdate.view.state).iterate({
29-
from: range.from,
30-
to: range.to,
31-
enter({ from, to }) {
32-
// In case model name represented in qoutes
33-
// like in python files , we need to remove qoutes
34-
const model = viewUpdate.view.state.doc
35-
.sliceString(from, to)
36-
.replaceAll('"', '')
37-
.replaceAll("'", '')
38-
39-
if (isNil(models.get(model))) return true
40-
41-
const decoration = Decoration.mark({
42-
attributes: {
43-
class: 'sqlmesh-model',
44-
model,
45-
},
46-
}).range(from, to)
47-
48-
decorations.push(decoration)
49-
},
50-
})
29+
if (viewUpdate.docChanged) {
30+
this.decorations = getDecorations(models, viewUpdate.view)
5131
}
52-
53-
this.decorations = Decoration.set(decorations)
5432
}
5533
},
5634
{
@@ -116,6 +94,41 @@ export function HoverTooltip(models: Map<string, Model>): Extension {
11694
)
11795
}
11896

97+
function getDecorations(
98+
models: Map<string, Model>,
99+
view: EditorView,
100+
): DecorationSet {
101+
const decorations: any = []
102+
103+
for (const range of view.visibleRanges) {
104+
syntaxTree(view.state).iterate({
105+
from: range.from,
106+
to: range.to,
107+
enter({ from, to }) {
108+
// In case model name represented in qoutes
109+
// like in python files, we need to remove qoutes
110+
const model = view.state.doc
111+
.sliceString(from, to)
112+
.replaceAll('"', '')
113+
.replaceAll("'", '')
114+
115+
if (isNil(models.get(model))) return true
116+
117+
const decoration = Decoration.mark({
118+
attributes: {
119+
class: 'sqlmesh-model',
120+
model,
121+
},
122+
}).range(from, to)
123+
124+
decorations.push(decoration)
125+
},
126+
})
127+
}
128+
129+
return Decoration.set(decorations)
130+
}
131+
119132
function handleClickOnSqlMeshModel(
120133
event: MouseEvent,
121134
models: Map<string, Model>,

‎web/client/src/library/components/fileTree/FileTree.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export default function FolderTree({
4747
return (
4848
<div
4949
className={clsx(
50-
'py-2 px-1 overflow-hidden overflow-y-auto text-sm',
50+
'py-2 px-1 overflow-hidden overflow-y-auto text-sm scrollbar scrollbar--vertical',
5151
className,
5252
)}
5353
>

‎web/client/src/library/components/plan/PlanChangePreview.tsx‎

Lines changed: 28 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
usePlanDispatch,
1919
type PlanChangeType,
2020
} from './context'
21+
import { isArrayNotEmpty } from '@utils/index'
2122

2223
interface PropsPlanChangePreview extends React.HTMLAttributes<HTMLElement> {
2324
headline?: string
@@ -33,7 +34,7 @@ function PlanChangePreview({
3334
return (
3435
<div
3536
className={clsx(
36-
'flex flex-col rounded-md p-4 w-full overflow-auto ',
37+
'flex flex-col rounded-md p-4 overflow-auto',
3738
type === EnumPlanChangeType.Add && 'bg-success-10',
3839
type === EnumPlanChangeType.Remove && 'bg-danger-10',
3940
type === EnumPlanChangeType.Direct && 'bg-secondary-10',
@@ -164,7 +165,7 @@ function ChangeCategories({ change }: { change: ChangeDirect }): JSX.Element {
164165
return (
165166
<RadioGroup
166167
className={clsx(
167-
'flex flex-col mt-2 ',
168+
'flex flex-col mt-2',
168169
planState === EnumPlanState.Finished
169170
? 'opacity-50 cursor-not-allowed'
170171
: 'cursor-pointer',
@@ -228,28 +229,32 @@ function PlanChangePreviewIndirect({
228229
key={change.model_name}
229230
className="text-warning-700 dark:text-warning-500"
230231
>
231-
<Disclosure>
232-
{({ open }) => (
233-
<>
234-
<Disclosure.Button className="flex items-center w-full justify-between rounded-lg text-left">
235-
<PlanChangePreviewTitle model_name={change.model_name} />
236-
{(() => {
237-
const Tag = open ? MinusCircleIcon : PlusCircleIcon
232+
{isArrayNotEmpty(change.direct) ? (
233+
<Disclosure>
234+
{({ open }) => (
235+
<>
236+
<Disclosure.Button className="flex items-center w-full justify-between rounded-lg text-left">
237+
<PlanChangePreviewTitle model_name={change.model_name} />
238+
{(() => {
239+
const Tag = open ? MinusCircleIcon : PlusCircleIcon
238240

239-
return (
240-
<Tag className="max-h-[1rem] min-w-[1rem] dark:text-primary-500 mt-0.5" />
241-
)
242-
})()}
243-
</Disclosure.Button>
244-
<Disclosure.Panel className="text-sm px-4 mb-4">
245-
<PlanChangePreviewRelations
246-
type="direct"
247-
models={change.direct ?? []}
248-
/>
249-
</Disclosure.Panel>
250-
</>
251-
)}
252-
</Disclosure>
241+
return (
242+
<Tag className="max-h-[1rem] min-w-[1rem] dark:text-primary-500 mt-0.5" />
243+
)
244+
})()}
245+
</Disclosure.Button>
246+
<Disclosure.Panel className="text-sm px-4 mb-4">
247+
<PlanChangePreviewRelations
248+
type="direct"
249+
models={change.direct ?? []}
250+
/>
251+
</Disclosure.Panel>
252+
</>
253+
)}
254+
</Disclosure>
255+
) : (
256+
<PlanChangePreviewTitle model_name={change.model_name} />
257+
)}
253258
</li>
254259
))}
255260
</ul>

‎web/client/src/library/components/plan/PlanWizard.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -211,7 +211,7 @@ export default function PlanWizard({
211211
<div className="flex">
212212
{isArrayNotEmpty(added) && (
213213
<PlanChangePreview
214-
className="w-full mx-2"
214+
className="w-full m-2"
215215
headline="Added Models"
216216
type={EnumPlanChangeType.Add}
217217
>
@@ -223,7 +223,7 @@ export default function PlanWizard({
223223
)}
224224
{isArrayNotEmpty(removed) && (
225225
<PlanChangePreview
226-
className="w-full mx-2"
226+
className="w-full m-2"
227227
headline="Removed Models"
228228
type={EnumPlanChangeType.Remove}
229229
>
@@ -239,7 +239,7 @@ export default function PlanWizard({
239239
<>
240240
{isArrayNotEmpty(modified?.direct) && (
241241
<PlanChangePreview
242-
className="w-full my-2"
242+
className="m-2"
243243
headline="Modified Directly"
244244
type={EnumPlanChangeType.Direct}
245245
>
@@ -250,7 +250,7 @@ export default function PlanWizard({
250250
)}
251251
{isArrayNotEmpty(modified.indirect) && (
252252
<PlanChangePreview
253-
className="w-full my-2"
253+
className="m-2"
254254
headline="Modified Indirectly"
255255
type={EnumPlanChangeType.Indirect}
256256
>
@@ -261,7 +261,7 @@ export default function PlanWizard({
261261
)}
262262
{isArrayNotEmpty(modified?.metadata) && (
263263
<PlanChangePreview
264-
className="w-full my-2"
264+
className="m-2"
265265
headline="Modified Metadata"
266266
type={EnumPlanChangeType.Metadata}
267267
>

‎web/client/src/models/file.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { File, FileType } from '../api/client'
22
import { type ModelDirectory } from './directory'
33
import { type InitialArtifact, ModelArtifact } from './artifact'
4+
import { isStringEmptyOrNil } from '@utils/index'
45

56
export interface InitialFile extends InitialArtifact, File {
67
content: string
@@ -32,7 +33,7 @@ export class ModelFile extends ModelArtifact<InitialFile> {
3233
this.extension = initial?.extension ?? this.initial.extension
3334
this.is_supported = initial?.is_supported ?? this.initial.is_supported
3435
this._content = this.content = initial?.content ?? this.initial.content
35-
this.type = initial?.type
36+
this.type = initial?.type ?? getFileType(initial?.path)
3637
}
3738

3839
get isEmpty(): boolean {
@@ -56,3 +57,9 @@ export class ModelFile extends ModelArtifact<InitialFile> {
5657
this.content = newContent
5758
}
5859
}
60+
61+
function getFileType(path?: string): FileType | undefined {
62+
if (path == null || isStringEmptyOrNil(path)) return
63+
64+
if (path.startsWith('models')) return FileType.model
65+
}

‎web/client/src/utils/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -163,10 +163,11 @@ export function debounceAsync<T = any>(
163163
let timeoutIdLeading: ReturnType<typeof setTimeout> | undefined
164164
let timeoutIdTrailing: ReturnType<typeof setTimeout> | undefined
165165

166+
clearTimeout(timeoutIdLeading)
167+
166168
async function callback(...args: any): Promise<T> {
167169
const callNow = immediate && timeoutIdLeading == null
168170

169-
clearTimeout(timeoutIdLeading)
170171
clearTimeout(timeoutIdTrailing)
171172

172173
const promise = new Promise<T>((resolve, reject) => {

‎web/client/src/workers/sqlglot/sqlglot.py‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
dialects = json.dumps(
88
[
99
{
10-
"dialect_title": "SqlGlot" if dialect == "" else dialect_class.__name__,
10+
"dialect_title": "SQLGlot" if dialect == "" else dialect_class.__name__,
1111
"dialect_name": dialect,
1212
}
1313
for dialect, dialect_class in Dialect.classes.items()

0 commit comments

Comments
 (0)