feat: scroll to definition

Author: brettkolodny

preview/apitypes/apitypes.go

@@ -65,6 +65,7 @@ type FriendlyDiagnostic = types.FriendlyDiagnostic
 type ParameterWithSource struct {
 	types.Parameter
 	TypeRange hcl.Range `json:"type_range"`
+	DefRange  hcl.Range `json:"def_range"`
 }
 
 func WithSource(p []types.Parameter) []ParameterWithSource {
@@ -76,6 +77,7 @@ func WithSource(p []types.Parameter) []ParameterWithSource {
 
 		if param.Source != nil {
 			src.TypeRange = param.Source.HCLBlock().TypeRange
+			src.DefRange = param.Source.HCLBlock().DefRange
 		}
 
 		result = append(result, src)

public/build/preview.wasm

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

src/client/Editor.tsx

@@ -14,7 +14,7 @@ import {
 } from "@/client/diagnostics";
 import { useDebouncedValue } from "@/client/hooks/debounce";
 import { useStore } from "@/client/store";
-import type {Parameter, ParserLog, PreviewOutput} from "@/gen/types";
+import type { ParameterWithSource, ParserLog, PreviewOutput} from "@/gen/types";
 import { cn } from "@/utils/cn";
 import ReactJsonView from "@microlink/react-json-view";
 import * as Dialog from "@radix-ui/react-dialog";
@@ -581,15 +581,15 @@ const Log: FC<LogProps> = ({ log }) => {
 	);
 };
 
-type FormProps = { parameters: Parameter[] };
+type FormProps = { parameters: ParameterWithSource[] };
 
 const Form: FC<FormProps> = ({ parameters }) => {
 	return parameters
 		.sort((a, b) => a.order - b.order)
 		.map((p, index) => <FormElement key={index} parameter={p} />);
 };
 
-type FormElementProps = { parameter: Parameter };
+type FormElementProps = { parameter: ParameterWithSource };
 const FormElement: FC<FormElementProps> = ({ parameter }) => {
 	const $form = useStore((state) => state.form);
 	const $setForm = useStore((state) => state.setFormState);

src/client/Preview.tsx

@@ -28,7 +28,11 @@ import {
 } from "@/client/components/Tooltip";
 import { useDebouncedValue } from "@/client/hooks/debounce";
 import { useEffectEvent } from "@/client/hooks/hookPolyfills";
-import type { NullHCLString, Parameter, ParameterOption } from "@/gen/types";
+import type {
+	NullHCLString,
+	ParameterWithSource as Parameter,
+	ParameterOption,
+} from "@/gen/types";
 import {
 	CircleAlert,
 	Info,
@@ -38,6 +42,7 @@ import {
 } from "lucide-react";
 import { type FC, useEffect, useId, useRef, useState } from "react";
 import * as Yup from "yup";
+import { useStore } from "@/client/store";
 
 interface WorkspaceBuildParameter {
 	readonly name: string;
@@ -121,6 +126,19 @@ const ParameterLabel: FC<ParameterLabelProps> = ({
 	autofill,
 	id,
 }) => {
+	const $editor = useStore((state) => state.editor);
+
+	const onGoToDefinition = () => {
+		$editor?.revealLine(parameter.def_range.Start.Line);
+		$editor?.setSelection({
+			startLineNumber: parameter.def_range.Start.Line,
+			startColumn: parameter.def_range.Start.Column,
+			endColumn: parameter.def_range.End.Column,
+			endLineNumber: parameter.def_range.End.Line,
+		});
+		$editor?.focus()
+	};
+
 	const displayName = parameter.display_name
 		? parameter.display_name
 		: parameter.name;
@@ -130,26 +148,17 @@ const ParameterLabel: FC<ParameterLabelProps> = ({
 
 	return (
 		<div className="flex items-start gap-2">
-			{
-				// {parameter.icon && (
-				// 				<ExternalImage
-				// 					className="w-5 h-5 mt-0.5 object-contain"
-				// 					alt="Parameter icon"
-				// 					src={parameter.icon}
-				// 				/>
-				// 			)}
-			}
 			<div className="flex w-full flex-col gap-1">
 				<Label
 					htmlFor={id}
 					className="flex flex-wrap gap-2 font-medium text-content-primary text-sm"
 				>
-					<span className="flex">
+					<button className="flex hover:underline" onClick={onGoToDefinition}>
 						{displayName}
 						{parameter.required && (
 							<span className="text-content-destructive">*</span>
 						)}
-					</span>
+					</button>
 					{!parameter.mutable && (
 						<TooltipProvider delayDuration={100}>
 							<Tooltip>

src/client/components/DynamicParameter.tsx

@@ -1,6 +1,7 @@
-import { create } from "zustand";
 import type { Diagnostic } from "@/client/diagnostics";
-import type { Parameter } from "@/gen/types";
+import type { ParameterWithSource } from "@/gen/types";
+import type { editor } from "monaco-editor";
+import { create } from "zustand";
 import { defaultCode } from "./snippets";
 
 type FormState = Record<string, string>;
@@ -18,21 +19,24 @@ const defaultErrorsState: ErrorsState = {
 
 type State = {
 	code: string;
-	parameters: Parameter[];
+	editor: editor.IStandaloneCodeEditor | null;
+	parameters: ParameterWithSource[];
 	form: FormState;
 	wasmState: WasmState;
 	errors: ErrorsState;
 	setCode: (code: string) => void;
 	setError: (diagnostics: Diagnostic[]) => void;
 	toggleShowError: (open?: boolean) => void;
 	setWasmState: (wasmState: WasmState) => void;
-	setParameters: (parameters: Parameter[]) => void;
+	setParameters: (parameters: ParameterWithSource[]) => void;
 	setFormState: (key: string, value: string) => void;
+	setEditor: (editor: editor.IStandaloneCodeEditor) => void;
 	resetForm: () => void;
 };
 
 export const useStore = create<State>()((set) => ({
 	code: window.CODE ?? defaultCode,
+	editor: null,
 	parameters: [],
 	wasmState: "loading",
 	form: {},
@@ -65,4 +69,5 @@ export const useStore = create<State>()((set) => ({
 			return { form };
 		}),
 	resetForm: () => set(() => ({ form: {} })),
+	setEditor: (editor) => set(() => ({ editor })),
 }));

src/client/store.tsx

@@ -101,6 +101,7 @@ export interface ParameterValidation {
 // From apitypes/apitypes.go
 export interface ParameterWithSource extends Parameter {
     type_range: Range;
+    def_range: Range;
 }
 
 // From apitypes/apitypes.go