Hook up Play Button and Execution Mode selector to Language Server. (#8037)

Implements #7990

app/gui2/shared/languageServer.ts

@@ -85,6 +85,10 @@ export class LanguageServer extends ObservableV2<Notifications> {
     return this.acquireCapability('file/receivesTreeUpdates', { path })
   }
 
+  acquireExecutionContextCanModify(contextId: ContextId): Promise<void> {
+    return this.acquireCapability('executionContext/canModify', { contextId })
+  }
+
   /** [Documentation](https://github.com/enso-org/enso/blob/develop/docs/language-server/protocol-language-server.md#sessioninitprotocolconnection) */
   initProtocolConnection(clientId: Uuid): Promise<response.InitProtocolConnection> {
     return this.request('session/initProtocolConnection', { clientId })

app/gui2/src/components/ExecutionModeSelector.vue

@@ -19,7 +19,7 @@ function onDocumentClick(event: MouseEvent) {
   }
 }
 
-useEvent(document, 'click', onDocumentClick)
+useEvent(document, 'pointerdown', onDocumentClick)
 </script>
 
 <template>

app/gui2/src/components/GraphEditor.vue

@@ -122,6 +122,25 @@ useEvent(window, 'pointerdown', interactionBindingsHandler, { capture: true })
 const scaledMousePos = computed(() => navigator.sceneMousePos?.scale(navigator.scale))
 const scaledSelectionAnchor = computed(() => nodeSelection.anchor?.scale(navigator.scale))
 
+/// Track play button presses.
+function onPlayButtonPress() {
+  projectStore.lsRpcConnection.then(async () => {
+    const modeValue = mode.value
+    if (modeValue == undefined) {
+      return
+    }
+    projectStore.executionContext.recompute('all', modeValue === 'live' ? 'Live' : 'Design')
+  })
+}
+
+/// Watch for changes in the execution mode.
+watch(
+  () => mode.value,
+  (modeValue) => {
+    projectStore.executionContext.setExecutionEnvironment(modeValue === 'live' ? 'Live' : 'Design')
+  },
+)
+
 const groupColors = computed(() => {
   const styles: { [key: string]: string } = {}
   for (let group of suggestionDb.groups) {
@@ -194,7 +213,7 @@ watch(componentBrowserVisible, (visible) => {
       @breadcrumbClick="console.log(`breadcrumb #${$event + 1} clicked.`)"
       @back="console.log('breadcrumbs \'back\' button clicked.')"
       @forward="console.log('breadcrumbs \'forward\' button clicked.')"
-      @execute="console.log('\'execute\' button clicked.')"
+      @execute="onPlayButtonPress()"
     />
     <div ref="codeEditorArea">
       <Suspense>

app/gui2/src/stores/project.ts

@@ -396,6 +396,13 @@ export class ExecutionContext extends ObservableV2<ExecutionContextNotification>
     return this.desiredStack[this.desiredStack.length - 1]!
   }
 
+  setExecutionEnvironment(mode: ExecutionEnvironment) {
+    this.queue.pushTask(async (state) => {
+      await state.lsRpc.setExecutionEnvironment(this.id, mode)
+      return state
+    })
+  }
+
   destroy() {
     this.abortCtl.abort()
   }