Set output evaluation context for a single node

app/gui2/e2e/MockApp.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { getMainFile, setMainFile } from '../mock/engine'
 import App from '../src/App.vue'
 import MockProjectStoreWrapper from '../stories/MockProjectStoreWrapper.vue'
-import { getMainFile, setMainFile } from './mockEngine'
 
 const mainFile = computed({
   get() {
@@ -15,7 +15,9 @@ const mainFile = computed({
 </script>
 
 <template>
-  <MockProjectStoreWrapper v-model="mainFile"><App :config="{}" /></MockProjectStoreWrapper>
+  <MockProjectStoreWrapper v-model="mainFile">
+    <App :config="{}" :metadata="{}" />
+  </MockProjectStoreWrapper>
 </template>
 
 <style scoped>

app/gui2/e2e/main.ts

@@ -1,13 +1,13 @@
 import 'enso-dashboard/src/tailwind.css'
 import { createPinia } from 'pinia'
 import { createApp, ref } from 'vue'
+import { mockDataHandler, mockLSHandler } from '../mock/engine'
 import '../src/assets/base.css'
 import { provideGuiConfig } from '../src/providers/guiConfig'
 import { provideVisualizationConfig } from '../src/providers/visualizationConfig'
 import { MockTransport, MockWebSocket } from '../src/util/net'
 import { Vec2 } from '../src/util/vec2'
 import MockApp from './MockApp.vue'
-import { mockDataHandler, mockLSHandler } from './mockEngine'
 
 MockTransport.addMock('engine', mockLSHandler)
 MockWebSocket.addMock('data', mockDataHandler)

app/gui2/e2e/setup.ts

@@ -6,7 +6,7 @@ import {
   type ProjectId,
   type ProjectName,
   type UTCDateTime,
-} from './mockProjectManager'
+} from '../mock/projectManager'
 import pmSpec from './pm-openrpc.json' assert { type: 'json' }
 
 export default function setup() {

app/gui2/mock/index.ts

@@ -0,0 +1,92 @@
+import { provideGuiConfig } from '@/providers/guiConfig'
+import { provideWidgetRegistry } from '@/providers/widgetRegistry'
+import { useGraphStore } from '@/stores/graph'
+import { GraphDb, mockNode } from '@/stores/graph/graphDatabase'
+import { useProjectStore } from '@/stores/project'
+import { ComputedValueRegistry } from '@/stores/project/computedValueRegistry'
+import { MockTransport, MockWebSocket } from '@/util/net'
+import * as random from 'lib0/random'
+import { getActivePinia } from 'pinia'
+import type { ExprId } from 'shared/yjsModel'
+import { ref, type App } from 'vue'
+import { mockDataHandler, mockLSHandler } from './engine'
+export * as providers from './providers'
+export * as vue from './vue'
+
+export function languageServer() {
+  MockTransport.addMock('engine', mockLSHandler)
+}
+
+export function dataServer() {
+  MockWebSocket.addMock('data', mockDataHandler)
+}
+
+export function guiConfig(app: App) {
+  return provideGuiConfig._mock(
+    ref({
+      startup: {
+        project: 'Mock Project',
+        displayedProjectName: 'Mock Project',
+      },
+      engine: { rpcUrl: 'mock://engine', dataUrl: 'mock://data' },
+    }),
+    app,
+  )
+}
+
+export const computedValueRegistry = ComputedValueRegistry.Mock
+export const graphDb = GraphDb.Mock
+
+export function widgetRegistry(app: App) {
+  return widgetRegistry.withGraphDb(graphDb())(app)
+}
+
+widgetRegistry.withGraphDb = function widgetRegistryWithGraphDb(graphDb: GraphDb) {
+  return (app: App) => provideWidgetRegistry._mock([graphDb], app)
+}
+
+export function graphStore() {
+  return useGraphStore(getActivePinia())
+}
+
+type ProjectStore = ReturnType<typeof projectStore>
+
+export function projectStore() {
+  const projectStore = useProjectStore(getActivePinia())
+  const mod = projectStore.projectModel.createNewModule('Main.enso')
+  mod.doc.ydoc.emit('load', [])
+  mod.doc.contents.insert(0, 'main =\n')
+  return projectStore
+}
+
+/** The stores should be initialized in this order, as `graphStore` depends on `projectStore`. */
+export function projectStoreAndGraphStore() {
+  return [projectStore(), graphStore()] satisfies [] | unknown[]
+}
+
+export function newExprId() {
+  return random.uuidv4() as ExprId
+}
+
+/** This should only be used for supplying as initial props when testing.
+ * Please do {@link GraphDb.mockNode} with a `useGraphStore().db` after mount. */
+export function node() {
+  return mockNode()
+}
+
+export function waitForMainModule(projectStore?: ProjectStore) {
+  const definedProjectStore = projectStore ?? useProjectStore(getActivePinia())
+  return new Promise((resolve, reject) => {
+    const handle1 = window.setInterval(() => {
+      if (definedProjectStore.module != null) {
+        window.clearInterval(handle1)
+        window.clearTimeout(handle2)
+        resolve(definedProjectStore.module)
+      }
+    }, 10)
+    const handle2 = window.setTimeout(() => {
+      window.clearInterval(handle1)
+      reject()
+    }, 5_000)
+  })
+}

app/gui2/e2e/mockProjectManager.ts → app/gui2/mock/projectManager.ts

@@ -1,11 +1,11 @@
 declare const projectIdBrand: unique symbol
-/** A name of a project. */
+/** An ID of a project. */
 export type ProjectId = string & { [projectIdBrand]: never }
 declare const projectNameBrand: unique symbol
 /** A name of a project. */
 export type ProjectName = string & { [projectNameBrand]: never }
 declare const utcDateTimeBrand: unique symbol
-/** A name of a project. */
+/** A UTC date and time. */
 export type UTCDateTime = string & { [utcDateTimeBrand]: never }
 
 /** A value specifying the hostname and port of a socket. */

app/gui2/mock/providers.ts

@@ -0,0 +1,55 @@
+import type { GraphSelection } from '@/providers/graphSelection'
+import type { GraphNavigator } from '../src/providers/graphNavigator'
+import { Rect } from '../src/util/rect'
+import { Vec2 } from '../src/util/vec2'
+
+export const graphNavigator: GraphNavigator = {
+  events: {} as any,
+  clientToScenePos: () => Vec2.Zero,
+  clientToSceneRect: () => Rect.Zero,
+  panAndZoomTo: () => {},
+  transform: '',
+  prescaledTransform: '',
+  translate: Vec2.Zero,
+  scale: 1,
+  sceneMousePos: Vec2.Zero,
+  viewBox: '',
+  viewport: Rect.Zero,
+}
+
+export function graphNavigatorWith(modifications?: Partial<GraphNavigator>): GraphNavigator {
+  return Object.assign({}, graphNavigator, modifications)
+}
+
+export const graphSelection: GraphSelection = {
+  events: {} as any,
+  anchor: undefined,
+  deselectAll: () => {},
+  addHoveredPort: () => new Set(),
+  removeHoveredPort: () => false,
+  handleSelectionOf: () => {},
+  hoveredNode: undefined,
+  hoveredPort: undefined,
+  isSelected: () => false,
+  mouseHandler: () => false,
+  selectAll: () => {},
+  selected: new Set(),
+}
+
+export function graphSelectionWith(modifications?: Partial<GraphSelection>): GraphSelection {
+  return Object.assign({}, graphSelection, modifications)
+}
+
+export const all = {
+  'graph navigator': graphNavigator,
+  'graph selection': graphSelection,
+}
+
+export function allWith(
+  modifications: Partial<{ [K in keyof typeof all]: Partial<(typeof all)[K]> }>,
+): typeof all {
+  return {
+    'graph navigator': graphNavigatorWith(modifications['graph navigator']),
+    'graph selection': graphSelectionWith(modifications['graph selection']),
+  }
+}

app/gui2/mock/vue.ts

@@ -0,0 +1,19 @@
+import { type VueWrapper } from '@vue/test-utils'
+import { nextTick } from 'vue'
+
+// It is currently not feasible to use generics here, as the type of the component's emits
+// is not exposed.
+export function handleEmit(wrapper: VueWrapper<any>, event: string, fn: (...args: any[]) => void) {
+  let previousLength = 0
+  return {
+    async run() {
+      const emitted = wrapper.emitted(event)
+      if (!emitted) return
+      for (let i = previousLength; i < emitted.length; i += 1) {
+        fn(...emitted[i]!)
+      }
+      previousLength = emitted.length
+      await nextTick()
+    },
+  }
+}

app/gui2/src/components/CircularMenu.vue

@@ -2,12 +2,13 @@
 import ToggleIcon from '@/components/ToggleIcon.vue'
 
 const props = defineProps<{
-  isAutoEvaluationDisabled: boolean
+  isOutputContextEnabledGlobally: boolean
+  isOutputContextOverridden: boolean
   isDocsVisible: boolean
   isVisualizationVisible: boolean
 }>()
 const emit = defineEmits<{
-  'update:isAutoEvaluationDisabled': [isAutoEvaluationDisabled: boolean]
+  'update:isOutputContextOverridden': [isOutputContextOverridden: boolean]
   'update:isDocsVisible': [isDocsVisible: boolean]
   'update:isVisualizationVisible': [isVisualizationVisible: boolean]
 }>()
@@ -16,11 +17,16 @@ const emit = defineEmits<{
 <template>
   <div class="CircularMenu">
     <ToggleIcon
-      icon="no_auto_replay"
-      class="icon-container button no-auto-evaluate-button"
-      :alt="`${props.isAutoEvaluationDisabled ? 'Enable' : 'Disable'} auto-evaluation`"
-      :modelValue="props.isAutoEvaluationDisabled"
-      @update:modelValue="emit('update:isAutoEvaluationDisabled', $event)"
+      :icon="props.isOutputContextEnabledGlobally ? 'no_auto_replay' : 'auto_replay'"
+      class="icon-container button override-output-context-button"
+      :class="{ 'output-context-overridden': props.isOutputContextOverridden }"
+      :alt="`${
+        props.isOutputContextEnabledGlobally != props.isOutputContextOverridden
+          ? 'Disable'
+          : 'Enable'
+      } output context`"
+      :modelValue="props.isOutputContextOverridden"
+      @update:modelValue="emit('update:isOutputContextOverridden', $event)"
     />
     <ToggleIcon
       icon="docs"
@@ -70,12 +76,17 @@ const emit = defineEmits<{
   opacity: unset;
 }
 
-.no-auto-evaluate-button {
+.override-output-context-button {
   position: absolute;
   left: 9px;
   top: 8px;
 }
 
+.output-context-overridden {
+  opacity: 100%;
+  color: red;
+}
+
 .docs-button {
   position: absolute;
   left: 18.54px;