Opening searcher with source node (#8279)

Implements #8065.

app/gui2/src/components/ComponentBrowser.vue

@@ -5,6 +5,7 @@ import { Filtering } from '@/components/ComponentBrowser/filtering'
 import { default as DocumentationPanel } from '@/components/DocumentationPanel.vue'
 import SvgIcon from '@/components/SvgIcon.vue'
 import ToggleIcon from '@/components/ToggleIcon.vue'
+import { useGraphStore } from '@/stores/graph.ts'
 import { useProjectStore } from '@/stores/project'
 import { useSuggestionDbStore } from '@/stores/suggestionDatabase'
 import { SuggestionKind, type SuggestionEntry } from '@/stores/suggestionDatabase/entry'
@@ -15,39 +16,61 @@ import type { Opt } from '@/util/opt'
 import { allRanges } from '@/util/range'
 import { Vec2 } from '@/util/vec2'
 import type { SuggestionId } from 'shared/languageServerTypes/suggestions'
-import type { ContentRange } from 'shared/yjsModel.ts'
+import type { ContentRange, ExprId } from 'shared/yjsModel.ts'
 import { computed, nextTick, onMounted, ref, watch, type Ref } from 'vue'
 import { useComponentBrowserInput } from './ComponentBrowser/input'
 
 const ITEM_SIZE = 32
 const TOP_BAR_HEIGHT = 32
 
+const projectStore = useProjectStore()
+const suggestionDbStore = useSuggestionDbStore()
+const graphStore = useGraphStore()
+
 const props = defineProps<{
   position: Vec2
   navigator: ReturnType<typeof useNavigator>
   initialContent: string
   initialCaretPosition: ContentRange
+  sourceNode: Opt<ExprId>
 }>()
 
 const emit = defineEmits<{
   finished: [selectedExpression: string]
 }>()
 
+function getInitialContent(): string {
+  if (props.sourceNode == null) return props.initialContent
+  const sourceNode = props.sourceNode
+  const sourceNodeName = graphStore.getNodeBinding(sourceNode)
+  const sourceNodeNameWithDot = sourceNodeName ? sourceNodeName + '.' : ''
+  return sourceNodeNameWithDot + props.initialContent
+}
+
+function getInitialCaret(): ContentRange {
+  if (props.sourceNode == null) return props.initialCaretPosition
+  const sourceNode = props.sourceNode
+  const sourceNodeName = graphStore.getNodeBinding(sourceNode)
+  const sourceNodeNameWithDot = sourceNodeName ? sourceNodeName + '.' : ''
+  return [
+    props.initialCaretPosition[0] + sourceNodeNameWithDot.length,
+    props.initialCaretPosition[1] + sourceNodeNameWithDot.length,
+  ]
+}
+
 onMounted(() => {
-  input.code.value = props.initialContent
   nextTick(() => {
+    input.code.value = getInitialContent()
+    const caret = getInitialCaret()
     if (inputField.value != null) {
-      inputField.value.selectionStart = props.initialCaretPosition[0]
-      inputField.value.selectionEnd = props.initialCaretPosition[1]
+      inputField.value.selectionStart = caret[0]
+      inputField.value.selectionEnd = caret[1]
       inputField.value.focus({ preventScroll: true })
       selectLastAfterRefresh()
     }
   })
 })
 
-const projectStore = useProjectStore()
-const suggestionDbStore = useSuggestionDbStore()
-
 // === Position ===
 
 const transform = computed(() => {

app/gui2/src/components/GraphEditor.vue

@@ -48,6 +48,11 @@ const nodeSelection = provideGraphSelection(navigator, graphStore.nodeRects, {
   },
 })
 
+const graphEditorSourceNode = computed(() => {
+  if (graphStore.editedNodeInfo != null) return undefined
+  return nodeSelection.selected.values().next().value
+})
+
 useEvent(window, 'keydown', (event) => {
   interactionBindingsHandler(event) || graphBindingsHandler(event) || codeEditorHandler(event)
 })
@@ -340,6 +345,7 @@ watch(
       @finished="onComponentBrowserCommit"
       :initialContent="componentBrowserInputContent"
       :initialCaretPosition="graphStore.editedNodeInfo?.range ?? [0, 0]"
+      :sourceNode="graphEditorSourceNode"
     />
     <TopBar
       v-model:mode="projectStore.executionMode"

app/gui2/src/stores/graph.ts

@@ -344,6 +344,12 @@ export const useGraphStore = defineStore('graph', () => {
     editedNodeInfo.value = { id, range }
   }
 
+  function getNodeBinding(id: ExprId): string {
+    const node = nodes.get(id)
+    if (node == null) return ''
+    return node.binding
+  }
+
   return {
     _ast,
     transact,
@@ -372,6 +378,7 @@ export const useGraphStore = defineStore('graph', () => {
     updateNodeRect,
     updateExprRect,
     setEditedNode,
+    getNodeBinding,
   }
 })