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