Checkbox shows argument name if not already shown (#9146)

Fixes #9002. This is not a great solution; doing this properly would require some refactoring of widget selection. Proposal:  #9145.

app/gui2/src/components/ComponentBrowser/input.ts

@@ -23,7 +23,7 @@ import {
 } from '@/util/qualifiedName'
 import { equalFlat } from 'lib0/array'
 import { sourceRangeKey, type SourceRange } from 'shared/yjsModel'
-import { computed, nextTick, ref, watch, type ComputedRef } from 'vue'
+import { computed, nextTick, ref, type ComputedRef } from 'vue'
 
 /** Information how the component browser is used, needed for proper input initializing. */
 export type Usage =

app/gui2/src/components/GraphEditor/widgets/WidgetArgumentName.vue

@@ -21,6 +21,11 @@ const showArgumentValue = computed(() => {
 
 const placeholder = computed(() => props.input instanceof ArgumentPlaceholder)
 const primary = computed(() => props.nesting < 2)
+
+const innerInput = computed(() => ({
+  ...props.input,
+  [ArgumentNameShownKey]: true,
+}))
 </script>
 
 <script lang="ts">
@@ -40,13 +45,15 @@ export const widgetDefinition = defineWidget(hasKnownArgumentName, {
     return isPlaceholder || isTopArg ? Score.Perfect : Score.Mismatch
   },
 })
+
+export const ArgumentNameShownKey: unique symbol = Symbol('ArgumentNameShownKey')
 </script>
 
 <template>
   <div class="WidgetArgumentName" :class="{ placeholder, primary }">
     <template v-if="showArgumentValue">
       <span class="name">{{ props.input[ArgumentInfoKey].info.name }}</span
-      ><NodeWidget :input="props.input" allowEmpty />
+      ><NodeWidget :input="innerInput" allowEmpty />
     </template>
     <template v-else>{{ props.input[ArgumentInfoKey].info.name }}</template>
   </div>

app/gui2/src/components/GraphEditor/widgets/WidgetCheckbox.vue

@@ -1,14 +1,16 @@
 <script setup lang="ts">
+import { ArgumentNameShownKey } from '@/components/GraphEditor/widgets/WidgetArgumentName.vue'
 import CheckboxWidget from '@/components/widgets/CheckboxWidget.vue'
 import { Score, WidgetInput, defineWidget, widgetProps } from '@/providers/widgetRegistry'
 import { useGraphStore } from '@/stores/graph'
 import { requiredImportsByFQN } from '@/stores/graph/imports'
-import { SuggestionDb, useSuggestionDbStore } from '@/stores/suggestionDatabase'
+import { useSuggestionDbStore } from '@/stores/suggestionDatabase'
 import { assert } from '@/util/assert'
 import { Ast } from '@/util/ast'
-import type { TokenId } from '@/util/ast/abstract.ts'
+import type { TokenId } from '@/util/ast/abstract'
+import { ArgumentInfoKey } from '@/util/callTree'
 import { asNot } from '@/util/data/types.ts'
-import { type Identifier, type QualifiedName } from '@/util/qualifiedName.ts'
+import { type Identifier, type QualifiedName } from '@/util/qualifiedName'
 import { computed } from 'vue'
 
 const props = defineProps(widgetProps(widgetDefinition))
@@ -55,6 +57,12 @@ const value = computed({
     }
   },
 })
+
+const primary = computed(() => props.nesting < 2)
+const argumentName = computed(() => {
+  if (ArgumentNameShownKey in props.input) return
+  return props.input[ArgumentInfoKey]?.info?.name
+})
 </script>
 
 <script lang="ts">
@@ -90,13 +98,29 @@ export const widgetDefinition = defineWidget(WidgetInput.isAstOrPlaceholder, {
 </script>
 
 <template>
-  <!-- See comment in GraphNode next to dragPointer definition about stopping pointerdown and pointerup -->
-  <CheckboxWidget
-    v-model="value"
-    class="WidgetCheckbox"
-    contenteditable="false"
-    @beforeinput.stop
-    @pointerdown.stop
-    @pointerup.stop
-  />
+  <div class="CheckboxContainer" :class="{ primary }">
+    <span v-if="argumentName" class="name" v-text="argumentName" />
+    <!-- See comment in GraphNode next to dragPointer definition about stopping pointerdown and pointerup -->
+    <CheckboxWidget
+      v-model="value"
+      class="WidgetCheckbox"
+      contenteditable="false"
+      @beforeinput.stop
+      @pointerdown.stop
+      @pointerup.stop
+    />
+  </div>
 </template>
+
+<style scoped>
+.CheckboxContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.name {
+  color: rgb(255 255 255 / 0.5);
+  margin-right: 8px;
+}
+</style>