Skip to content

Commit 36209b8

Browse files
brettkolodnybrettkolodny
committed
feat: scroll to definition
1 parent 2397f45 commit 36209b8

File tree

7 files changed

+38
-19
lines changed

7 files changed

+38
-19
lines changed

‎preview/apitypes/apitypes.go

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ type FriendlyDiagnostic = types.FriendlyDiagnostic
6565
type ParameterWithSource struct {
6666
types.Parameter
6767
TypeRange hcl.Range `json:"type_range"`
68+
DefRange hcl.Range `json:"def_range"`
6869
}
6970

7071
func WithSource(p []types.Parameter) []ParameterWithSource {
@@ -76,6 +77,7 @@ func WithSource(p []types.Parameter) []ParameterWithSource {
7677

7778
if param.Source != nil {
7879
src.TypeRange = param.Source.HCLBlock().TypeRange
80+
src.DefRange = param.Source.HCLBlock().DefRange
7981
}
8082

8183
result = append(result, src)

‎public/build/preview.wasm

-43.1 KB
Binary file not shown.

‎src/client/Editor.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ export const Editor: FC = () => {
3939

4040
const $code = useStore((state) => state.code);
4141
const $setCode = useStore((state) => state.setCode);
42+
const $setEditor = useStore((state) => state.setEditor);
4243

4344
const [codeCopied, setCodeCopied] = useState(() => false);
4445
const copyTimeoutId = useRef<ReturnType<typeof setTimeout> | undefined>(
@@ -161,6 +162,7 @@ export const Editor: FC = () => {
161162
<div className="h-full w-full bg-surface-secondary font-mono">
162163
<MonacoEditor
163164
value={$code}
165+
onMount={(editor) => $setEditor(editor)}
164166
onChange={(code) => {
165167
if (code !== undefined) {
166168
$setCode(code);

‎src/client/Preview.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
} from "@/client/diagnostics";
1515
import { useDebouncedValue } from "@/client/hooks/debounce";
1616
import { useStore } from "@/client/store";
17-
import type {Parameter, ParserLog, PreviewOutput} from "@/gen/types";
17+
import type { ParameterWithSource, ParserLog, PreviewOutput} from "@/gen/types";
1818
import { cn } from "@/utils/cn";
1919
import ReactJsonView from "@microlink/react-json-view";
2020
import * as Dialog from "@radix-ui/react-dialog";
@@ -581,15 +581,15 @@ const Log: FC<LogProps> = ({ log }) => {
581581
);
582582
};
583583

584-
type FormProps = { parameters: Parameter[] };
584+
type FormProps = { parameters: ParameterWithSource[] };
585585

586586
const Form: FC<FormProps> = ({ parameters }) => {
587587
return parameters
588588
.sort((a, b) => a.order - b.order)
589589
.map((p, index) => <FormElement key={index} parameter={p} />);
590590
};
591591

592-
type FormElementProps = { parameter: Parameter };
592+
type FormElementProps = { parameter: ParameterWithSource };
593593
const FormElement: FC<FormElementProps> = ({ parameter }) => {
594594
const $form = useStore((state) => state.form);
595595
const $setForm = useStore((state) => state.setFormState);

‎src/client/components/DynamicParameter.tsx

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,11 @@ import {
2828
} from "@/client/components/Tooltip";
2929
import { useDebouncedValue } from "@/client/hooks/debounce";
3030
import { useEffectEvent } from "@/client/hooks/hookPolyfills";
31-
import type { NullHCLString, Parameter, ParameterOption } from "@/gen/types";
31+
import type {
32+
NullHCLString,
33+
ParameterWithSource as Parameter,
34+
ParameterOption,
35+
} from "@/gen/types";
3236
import {
3337
CircleAlert,
3438
Info,
@@ -38,6 +42,7 @@ import {
3842
} from "lucide-react";
3943
import { type FC, useEffect, useId, useRef, useState } from "react";
4044
import * as Yup from "yup";
45+
import { useStore } from "@/client/store";
4146

4247
interface WorkspaceBuildParameter {
4348
readonly name: string;
@@ -121,6 +126,19 @@ const ParameterLabel: FC<ParameterLabelProps> = ({
121126
autofill,
122127
id,
123128
}) => {
129+
const $editor = useStore((state) => state.editor);
130+
131+
const onGoToDefinition = () => {
132+
$editor?.revealLine(parameter.def_range.Start.Line);
133+
$editor?.setSelection({
134+
startLineNumber: parameter.def_range.Start.Line,
135+
startColumn: parameter.def_range.Start.Column,
136+
endColumn: parameter.def_range.End.Column,
137+
endLineNumber: parameter.def_range.End.Line,
138+
});
139+
$editor?.focus()
140+
};
141+
124142
const displayName = parameter.display_name
125143
? parameter.display_name
126144
: parameter.name;
@@ -130,26 +148,17 @@ const ParameterLabel: FC<ParameterLabelProps> = ({
130148

131149
return (
132150
<div className="flex items-start gap-2">
133-
{
134-
// {parameter.icon && (
135-
// <ExternalImage
136-
// className="w-5 h-5 mt-0.5 object-contain"
137-
// alt="Parameter icon"
138-
// src={parameter.icon}
139-
// />
140-
// )}
141-
}
142151
<div className="flex w-full flex-col gap-1">
143152
<Label
144153
htmlFor={id}
145154
className="flex flex-wrap gap-2 font-medium text-content-primary text-sm"
146155
>
147-
<span className="flex">
156+
<button className="flex hover:underline" onClick={onGoToDefinition}>
148157
{displayName}
149158
{parameter.required && (
150159
<span className="text-content-destructive">*</span>
151160
)}
152-
</span>
161+
</button>
153162
{!parameter.mutable && (
154163
<TooltipProvider delayDuration={100}>
155164
<Tooltip>

‎src/client/store.tsx

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import { create } from "zustand";
21
import type { Diagnostic } from "@/client/diagnostics";
3-
import type { Parameter } from "@/gen/types";
2+
import type { ParameterWithSource } from "@/gen/types";
3+
import type { editor } from "monaco-editor";
4+
import { create } from "zustand";
45
import { defaultCode } from "./snippets";
56

67
type FormState = Record<string, string>;
@@ -18,21 +19,24 @@ const defaultErrorsState: ErrorsState = {
1819

1920
type State = {
2021
code: string;
21-
parameters: Parameter[];
22+
editor: editor.IStandaloneCodeEditor | null;
23+
parameters: ParameterWithSource[];
2224
form: FormState;
2325
wasmState: WasmState;
2426
errors: ErrorsState;
2527
setCode: (code: string) => void;
2628
setError: (diagnostics: Diagnostic[]) => void;
2729
toggleShowError: (open?: boolean) => void;
2830
setWasmState: (wasmState: WasmState) => void;
29-
setParameters: (parameters: Parameter[]) => void;
31+
setParameters: (parameters: ParameterWithSource[]) => void;
3032
setFormState: (key: string, value: string) => void;
33+
setEditor: (editor: editor.IStandaloneCodeEditor) => void;
3134
resetForm: () => void;
3235
};
3336

3437
export const useStore = create<State>()((set) => ({
3538
code: window.CODE ?? defaultCode,
39+
editor: null,
3640
parameters: [],
3741
wasmState: "loading",
3842
form: {},
@@ -65,4 +69,5 @@ export const useStore = create<State>()((set) => ({
6569
return { form };
6670
}),
6771
resetForm: () => set(() => ({ form: {} })),
72+
setEditor: (editor) => set(() => ({ editor })),
6873
}));

‎src/gen/types.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,7 @@ export interface ParameterValidation {
101101
// From apitypes/apitypes.go
102102
export interface ParameterWithSource extends Parameter {
103103
type_range: Range;
104+
def_range: Range;
104105
}
105106

106107
// From apitypes/apitypes.go

0 commit comments

Comments
 (0)