From 5c2718e48509347a5e083eb1b34e4153492c60ba Mon Sep 17 00:00:00 2001
From: Kaz <kaz@lambdaverse.org>
Date: Fri, 1 Mar 2024 06:41:04 -0800
Subject: [PATCH 1/4] New menuVisible logic

---
 app/gui2/mock/providers.ts                    |  1 +
 .../src/components/GraphEditor/GraphNode.vue  | 41 ++++++++-----------
 app/gui2/src/composables/selection.ts         |  1 +
 3 files changed, 18 insertions(+), 25 deletions(-)

diff --git a/app/gui2/mock/providers.ts b/app/gui2/mock/providers.ts
index 5100853d8bca..9845731a5550 100644
--- a/app/gui2/mock/providers.ts
+++ b/app/gui2/mock/providers.ts
@@ -30,6 +30,7 @@ export const graphSelection: GraphSelection = {
   hoveredNode: undefined,
   hoveredPort: undefined,
   isSelected: () => false,
+  isChanging: false,
   mouseHandler: () => false,
   selectAll: () => {},
   selected: new Set(),
diff --git a/app/gui2/src/components/GraphEditor/GraphNode.vue b/app/gui2/src/components/GraphEditor/GraphNode.vue
index cb399e6cb981..83783d3f79de 100644
--- a/app/gui2/src/components/GraphEditor/GraphNode.vue
+++ b/app/gui2/src/components/GraphEditor/GraphNode.vue
@@ -87,14 +87,6 @@ const contentNode = ref<HTMLElement>()
 const nodeSize = useResizeObserver(rootNode)
 const baseNodeSize = computed(() => new Vec2(contentNode.value?.scrollWidth ?? 0, nodeSize.value.y))
 
-/// Menu can be full, partial or off
-enum MenuState {
-  Full,
-  Partial,
-  Off,
-}
-const menuVisible = ref(MenuState.Off)
-
 const error = computed(() => {
   const externalId = graph.db.idToExternal(nodeId.value)
   if (!externalId) return
@@ -121,12 +113,19 @@ const warning = computed(() => {
 })
 
 const isSelected = computed(() => nodeSelection?.isSelected(nodeId.value) ?? false)
-const isOnlyOneSelected = computed(() => isSelected.value && nodeSelection?.selected.size === 1)
-watch(isSelected, (selected) => {
-  if (!selected) {
-    menuVisible.value = MenuState.Off
-  }
+const isOnlyOneSelected = computed(
+  () => isSelected.value && nodeSelection?.selected.size === 1 && !nodeSelection.isChanging,
+)
+
+const menuVisible = isOnlyOneSelected
+const menuFull = ref(false)
+watch(menuVisible, (visible) => {
+  if (!visible) menuFull.value = false
 })
+function openFullMenu() {
+  menuFull.value = true
+  nodeSelection?.setSelection(new Set([nodeId.value]))
+}
 
 const isDocsVisible = ref(false)
 const visualizationWidth = computed(() => props.node.vis?.width ?? null)
@@ -180,7 +179,6 @@ const dragPointer = usePointer((pos, event, type) => {
       ) {
         nodeSelection?.handleSelectionOf(event, new Set([nodeId.value]))
         handleNodeClick(event)
-        menuVisible.value = MenuState.Partial
       }
       startEvent = null
       startEpochMs.value = 0
@@ -362,13 +360,6 @@ function portGroupStyle(port: PortData) {
   }
 }
 
-function openFullMenu() {
-  if (!nodeSelection?.isSelected(nodeId.value)) {
-    nodeSelection?.setSelection(new Set([nodeId.value]))
-  }
-  menuVisible.value = MenuState.Full
-}
-
 const documentation = computed<string | undefined>(() => props.node.documentation)
 </script>
 
@@ -400,12 +391,12 @@ const documentation = computed<string | undefined>(() => props.node.documentatio
       {{ node.pattern?.code() ?? '' }}
     </div>
     <CircularMenu
-      v-if="menuVisible === MenuState.Full || menuVisible === MenuState.Partial"
+      v-if="menuVisible"
       v-model:isOutputContextOverridden="isOutputContextOverridden"
       v-model:isDocsVisible="isDocsVisible"
       :isOutputContextEnabledGlobally="projectStore.isOutputContextEnabled"
       :isVisualizationVisible="isVisualizationVisible"
-      :isFullMenuVisible="menuVisible === MenuState.Full"
+      :isFullMenuVisible="menuVisible && menuFull"
       @update:isVisualizationVisible="emit('update:visualizationVisible', $event)"
       @startEditing="startEditingNode"
     />
@@ -414,7 +405,7 @@ const documentation = computed<string | undefined>(() => props.node.documentatio
       :nodeSize="baseNodeSize"
       :scale="navigator?.scale ?? 1"
       :nodePosition="props.node.position"
-      :isCircularMenuVisible="menuVisible === MenuState.Full || menuVisible === MenuState.Partial"
+      :isCircularMenuVisible="menuVisible"
       :currentType="node.vis?.identifier"
       :isFullscreen="isVisualizationFullscreen"
       :dataSource="{ type: 'node', nodeId: externalId }"
@@ -452,7 +443,7 @@ const documentation = computed<string | undefined>(() => props.node.documentatio
     <GraphNodeError
       v-if="warning && (nodeHovered || isSelected)"
       class="afterNode warning"
-      :class="menuVisible === MenuState.Off ? '' : 'messageWithMenu'"
+      :class="{ messageWithMenu: menuVisible }"
       :message="warning"
       type="warning"
     />
diff --git a/app/gui2/src/composables/selection.ts b/app/gui2/src/composables/selection.ts
index 1a8e1ff9b2e3..5f047d6c1009 100644
--- a/app/gui2/src/composables/selection.ts
+++ b/app/gui2/src/composables/selection.ts
@@ -148,6 +148,7 @@ export function useSelection<T>(
     },
     deselectAll: () => selected.clear(),
     isSelected: (element: T) => selected.has(element),
+    isChanging: computed(() => anchor.value != null),
     setSelection,
     handleSelectionOf,
     hoveredNode,

From b6b437b693d365f62ba8e0f4ecd29bdc02cb474f Mon Sep 17 00:00:00 2001
From: Kaz <kaz@lambdaverse.org>
Date: Fri, 1 Mar 2024 08:00:54 -0800
Subject: [PATCH 2/4] Hide placeholders unless sole selected node, required
 argument, or requested by dynamic config

---
 app/gui2/e2e/widgets.spec.ts                  |  8 +++++++
 .../src/components/GraphEditor/GraphNode.vue  |  1 +
 .../components/GraphEditor/NodeWidgetTree.vue |  2 ++
 .../GraphEditor/widgets/WidgetApplication.vue | 21 ++++++++++++++++++-
 .../GraphEditor/widgets/WidgetFunction.vue    |  2 ++
 app/gui2/src/providers/widgetTree.ts          |  2 ++
 app/gui2/src/util/callTree.ts                 | 11 +++++++++-
 7 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/app/gui2/e2e/widgets.spec.ts b/app/gui2/e2e/widgets.spec.ts
index ca33d5a357a7..57f3925e5191 100644
--- a/app/gui2/e2e/widgets.spec.ts
+++ b/app/gui2/e2e/widgets.spec.ts
@@ -60,6 +60,10 @@ test('Selection widgets in Data.read node', async ({ page }) => {
   // Check initially visible arguments
   const node = locate.graphNodeByBinding(page, 'data')
   const argumentNames = node.locator('.WidgetArgumentName')
+  await expect(argumentNames).toHaveCount(1)
+
+  // Check arguments after selecting node
+  await node.click()
   await expect(argumentNames).toHaveCount(3)
 
   // Set value on `on_problems` (static drop-down)
@@ -129,6 +133,10 @@ test('Managing aggregates in `aggregate` node', async ({ page }) => {
   // Check initially visible arguments
   const node = locate.graphNodeByBinding(page, 'aggregated')
   const argumentNames = node.locator('.WidgetArgumentName')
+  await expect(argumentNames).toHaveCount(1)
+
+  // Check arguments after selecting node
+  await node.click()
   await expect(argumentNames).toHaveCount(3)
 
   // Add first aggregate
diff --git a/app/gui2/src/components/GraphEditor/GraphNode.vue b/app/gui2/src/components/GraphEditor/GraphNode.vue
index 83783d3f79de..35083440a710 100644
--- a/app/gui2/src/components/GraphEditor/GraphNode.vue
+++ b/app/gui2/src/components/GraphEditor/GraphNode.vue
@@ -436,6 +436,7 @@ const documentation = computed<string | undefined>(() => props.node.documentatio
         :icon="icon"
         :connectedSelfArgumentId="connectedSelfArgumentId"
         :potentialSelfArgumentId="potentialSelfArgumentId"
+        :extended="isOnlyOneSelected"
         @openFullMenu="openFullMenu"
       />
     </div>
diff --git a/app/gui2/src/components/GraphEditor/NodeWidgetTree.vue b/app/gui2/src/components/GraphEditor/NodeWidgetTree.vue
index b841b2557094..d043fbaf44b2 100644
--- a/app/gui2/src/components/GraphEditor/NodeWidgetTree.vue
+++ b/app/gui2/src/components/GraphEditor/NodeWidgetTree.vue
@@ -15,6 +15,7 @@ const props = defineProps<{
   icon: Icon
   connectedSelfArgumentId: Ast.AstId | undefined
   potentialSelfArgumentId: Ast.AstId | undefined
+  extended: boolean
 }>()
 const emit = defineEmits<{
   openFullMenu: []
@@ -69,6 +70,7 @@ provideWidgetTree(
   toRef(props, 'icon'),
   toRef(props, 'connectedSelfArgumentId'),
   toRef(props, 'potentialSelfArgumentId'),
+  toRef(props, 'extended'),
   layoutTransitions.active,
   () => {
     emit('openFullMenu')
diff --git a/app/gui2/src/components/GraphEditor/widgets/WidgetApplication.vue b/app/gui2/src/components/GraphEditor/widgets/WidgetApplication.vue
index 8da01424979b..2ba22aa2b6ce 100644
--- a/app/gui2/src/components/GraphEditor/widgets/WidgetApplication.vue
+++ b/app/gui2/src/components/GraphEditor/widgets/WidgetApplication.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import NodeWidget from '@/components/GraphEditor/NodeWidget.vue'
 import { WidgetInput, defineWidget, widgetProps } from '@/providers/widgetRegistry'
+import { injectWidgetTree } from '@/providers/widgetTree'
 import { Ast } from '@/util/ast'
 import { ArgumentApplication, ArgumentApplicationKey } from '@/util/callTree'
 import { computed } from 'vue'
 
 const props = defineProps(widgetProps(widgetDefinition))
+const tree = injectWidgetTree()
 const application = computed(() => props.input[ArgumentApplicationKey])
 const targetMaybePort = computed(() => {
   const target = application.value.target
@@ -45,7 +47,12 @@ export const widgetDefinition = defineWidget(ArgumentApplicationKey, {
     <div v-if="application.infixOperator" class="infixOp" :style="operatorStyle">
       <NodeWidget :input="WidgetInput.FromAst(application.infixOperator)" />
     </div>
-    <NodeWidget :input="application.argument.toWidgetInput()" nest />
+    <div
+      v-if="tree.extended || !application.argument.hideByDefault"
+      :class="{ animateWhenShown: application.argument.hideByDefault }"
+    >
+      <NodeWidget :input="application.argument.toWidgetInput()" nest />
+    </div>
   </span>
 </template>
 
@@ -75,4 +82,16 @@ export const widgetDefinition = defineWidget(ArgumentApplicationKey, {
     white-space: pre;
   }
 }
+
+.animateWhenShown {
+  animation: show 4800ms 100ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;
+  max-width: 0;
+  overflow-x: clip;
+}
+
+@keyframes show {
+  100% {
+    max-width: 2000px;
+  }
+}
 </style>
diff --git a/app/gui2/src/components/GraphEditor/widgets/WidgetFunction.vue b/app/gui2/src/components/GraphEditor/widgets/WidgetFunction.vue
index 34ba2e9f4cd1..2020bb1cdd72 100644
--- a/app/gui2/src/components/GraphEditor/widgets/WidgetFunction.vue
+++ b/app/gui2/src/components/GraphEditor/widgets/WidgetFunction.vue
@@ -12,6 +12,7 @@ import {
   argsWidgetConfigurationSchema,
   functionCallConfiguration,
 } from '@/providers/widgetRegistry/configuration'
+import { injectWidgetTree } from '@/providers/widgetTree'
 import { useGraphStore } from '@/stores/graph'
 import { useProjectStore, type NodeVisualizationConfiguration } from '@/stores/project'
 import { entryQn } from '@/stores/suggestionDatabase/entry'
@@ -34,6 +35,7 @@ import { computed, proxyRefs } from 'vue'
 const props = defineProps(widgetProps(widgetDefinition))
 const graph = useGraphStore()
 const project = useProjectStore()
+const tree = injectWidgetTree()
 
 provideFunctionInfo(
   proxyRefs({
diff --git a/app/gui2/src/providers/widgetTree.ts b/app/gui2/src/providers/widgetTree.ts
index fccae085a2dc..e4543badf7b5 100644
--- a/app/gui2/src/providers/widgetTree.ts
+++ b/app/gui2/src/providers/widgetTree.ts
@@ -14,6 +14,7 @@ const { provideFn, injectFn } = createContextStore(
     icon: Ref<Icon>,
     connectedSelfArgumentId: Ref<Ast.AstId | undefined>,
     potentialSelfArgumentId: Ref<Ast.AstId | undefined>,
+    extended: Ref<boolean>,
     hasActiveAnimations: Ref<boolean>,
     emitOpenFullMenu: () => void,
   ) => {
@@ -25,6 +26,7 @@ const { provideFn, injectFn } = createContextStore(
       icon,
       connectedSelfArgumentId,
       potentialSelfArgumentId,
+      extended,
       nodeSpanStart,
       hasActiveAnimations,
       emitOpenFullMenu,
diff --git a/app/gui2/src/util/callTree.ts b/app/gui2/src/util/callTree.ts
index 6839111a8f24..12ec6b382b00 100644
--- a/app/gui2/src/util/callTree.ts
+++ b/app/gui2/src/util/callTree.ts
@@ -2,6 +2,7 @@ import type { PortId } from '@/providers/portInfo'
 import { WidgetInput } from '@/providers/widgetRegistry'
 import type { WidgetConfiguration } from '@/providers/widgetRegistry/configuration'
 import * as widgetCfg from '@/providers/widgetRegistry/configuration'
+import { DisplayMode } from '@/providers/widgetRegistry/configuration'
 import type { SuggestionEntry, SuggestionEntryArgument } from '@/stores/suggestionDatabase/entry'
 import { Ast } from '@/util/ast'
 import { findLastIndex, tryGetIndex } from '@/util/data/array'
@@ -23,7 +24,7 @@ export class ArgumentPlaceholder {
     public argInfo: SuggestionEntryArgument,
     public kind: ApplicationKind,
     public insertAsNamed: boolean,
-    public dynamicConfig?: WidgetConfiguration | undefined,
+    public dynamicConfig?: (WidgetConfiguration & { display?: DisplayMode }) | undefined,
   ) {}
 
   static WithRetrievedConfig(
@@ -52,6 +53,10 @@ export class ArgumentPlaceholder {
   get portId(): PortId {
     return `${this.callId}[${this.index}]` as PortId
   }
+
+  get hideByDefault(): boolean {
+    return this.argInfo.hasDefault && this.dynamicConfig?.display !== DisplayMode.Always
+  }
 }
 
 export class ArgumentAst {
@@ -88,6 +93,10 @@ export class ArgumentAst {
   get portId(): PortId {
     return this.ast.id
   }
+
+  get hideByDefault(): boolean {
+    return false
+  }
 }
 
 type InterpretedCall = InterpretedInfix | InterpretedPrefix

From 3bdd736239e8b4230db939fb671d4e00b2928483 Mon Sep 17 00:00:00 2001
From: Kaz <kaz@lambdaverse.org>
Date: Fri, 1 Mar 2024 09:56:03 -0800
Subject: [PATCH 3/4] Fix alignment

---
 .../components/GraphEditor/widgets/WidgetApplication.vue   | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/app/gui2/src/components/GraphEditor/widgets/WidgetApplication.vue b/app/gui2/src/components/GraphEditor/widgets/WidgetApplication.vue
index 2ba22aa2b6ce..1f7935aa934e 100644
--- a/app/gui2/src/components/GraphEditor/widgets/WidgetApplication.vue
+++ b/app/gui2/src/components/GraphEditor/widgets/WidgetApplication.vue
@@ -49,6 +49,7 @@ export const widgetDefinition = defineWidget(ArgumentApplicationKey, {
     </div>
     <div
       v-if="tree.extended || !application.argument.hideByDefault"
+      class="argument"
       :class="{ animateWhenShown: application.argument.hideByDefault }"
     >
       <NodeWidget :input="application.argument.toWidgetInput()" nest />
@@ -83,6 +84,12 @@ export const widgetDefinition = defineWidget(ArgumentApplicationKey, {
   }
 }
 
+.argument {
+  display: flex;
+  flex-direction: row;
+  place-items: center;
+}
+
 .animateWhenShown {
   animation: show 4800ms 100ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;
   max-width: 0;

From 27d819cc8f056e8800bd6f1bc29670dcf160f437 Mon Sep 17 00:00:00 2001
From: Kaz <kaz@lambdaverse.org>
Date: Fri, 1 Mar 2024 14:56:15 -0800
Subject: [PATCH 4/4] Lint

---
 app/gui2/src/components/GraphEditor/GraphNodeComment.vue       | 2 +-
 app/gui2/src/components/GraphEditor/widgets/WidgetFunction.vue | 2 --
 app/gui2/ydoc-server/edits.ts                                  | 2 +-
 3 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/app/gui2/src/components/GraphEditor/GraphNodeComment.vue b/app/gui2/src/components/GraphEditor/GraphNodeComment.vue
index 6b3bc8b4b503..4b63f33966cb 100644
--- a/app/gui2/src/components/GraphEditor/GraphNodeComment.vue
+++ b/app/gui2/src/components/GraphEditor/GraphNodeComment.vue
@@ -4,7 +4,7 @@ import { injectInteractionHandler } from '@/providers/interactionHandler'
 import { defineKeybinds } from '@/util/shortcuts'
 import * as random from 'lib0/random'
 import { textChangeToEdits } from 'shared/util/data/text'
-import { computed, ref, watch, watchEffect } from 'vue'
+import { computed, ref, watchEffect } from 'vue'
 
 const { minimalSetup, EditorState, EditorView, textEditToChangeSpec } = await import(
   '@/components/CodeEditor/codemirror'
diff --git a/app/gui2/src/components/GraphEditor/widgets/WidgetFunction.vue b/app/gui2/src/components/GraphEditor/widgets/WidgetFunction.vue
index 2020bb1cdd72..34ba2e9f4cd1 100644
--- a/app/gui2/src/components/GraphEditor/widgets/WidgetFunction.vue
+++ b/app/gui2/src/components/GraphEditor/widgets/WidgetFunction.vue
@@ -12,7 +12,6 @@ import {
   argsWidgetConfigurationSchema,
   functionCallConfiguration,
 } from '@/providers/widgetRegistry/configuration'
-import { injectWidgetTree } from '@/providers/widgetTree'
 import { useGraphStore } from '@/stores/graph'
 import { useProjectStore, type NodeVisualizationConfiguration } from '@/stores/project'
 import { entryQn } from '@/stores/suggestionDatabase/entry'
@@ -35,7 +34,6 @@ import { computed, proxyRefs } from 'vue'
 const props = defineProps(widgetProps(widgetDefinition))
 const graph = useGraphStore()
 const project = useProjectStore()
-const tree = injectWidgetTree()
 
 provideFunctionInfo(
   proxyRefs({
diff --git a/app/gui2/ydoc-server/edits.ts b/app/gui2/ydoc-server/edits.ts
index 11b2a40a0361..3515333854e4 100644
--- a/app/gui2/ydoc-server/edits.ts
+++ b/app/gui2/ydoc-server/edits.ts
@@ -266,7 +266,7 @@ export function prettyPrintDiff(from: string, to: string): string {
 }
 
 if (import.meta.vitest) {
-  const { test, expect, bench, describe } = import.meta.vitest
+  const { test, expect } = import.meta.vitest
 
   test.each`
     oldStr     | newStr      | expected