From 245ec7afe8b6313a03e1be3dd83340a453f8dda8 Mon Sep 17 00:00:00 2001
From: Kaz Wesley <kaz@lambdaverse.org>
Date: Fri, 23 Feb 2024 12:10:43 -0800
Subject: [PATCH] Replace execution context controls with record mode controls
 (#9133)

Closes #8673. Stacked on #9132.

Before:
![image](https://github.com/enso-org/enso/assets/1047859/1b1ca9f4-eda9-45fd-bec1-cd7e255112fa)
![image](https://github.com/enso-org/enso/assets/1047859/b8cf6de1-d75c-48d0-ac0d-9e6e0c659dd4)

After:
![image](https://github.com/enso-org/enso/assets/1047859/91d13862-96e7-4175-a61e-40aecd6d62b0)
![image](https://github.com/enso-org/enso/assets/1047859/ef20511f-00f2-4042-b4d4-97728817500b)

# Important Notes
- The model has been refactored from execution-modes (live/design) to record-mode (on/off) up to the point of the project store, where it's translated (since the backend still uses the live/design concepts).
---
 app/gui2/scripts/generateIconMetadata.js      |   4 +-
 app/gui2/src/assets/icons.svg                 |   8 +
 .../src/components/ExecutionModeSelector.vue  | 143 ------------------
 app/gui2/src/components/GraphEditor.vue       |  10 +-
 app/gui2/src/components/RecordControl.vue     |  61 ++++++++
 app/gui2/src/components/TopBar.vue            |  18 +--
 app/gui2/src/stores/project/index.ts          |  10 ++
 app/gui2/stories/TopBar.story.vue             |  13 +-
 8 files changed, 98 insertions(+), 169 deletions(-)
 delete mode 100644 app/gui2/src/components/ExecutionModeSelector.vue
 create mode 100644 app/gui2/src/components/RecordControl.vue

diff --git a/app/gui2/scripts/generateIconMetadata.js b/app/gui2/scripts/generateIconMetadata.js
index 06e5f056e6..ab755ef1c2 100644
--- a/app/gui2/scripts/generateIconMetadata.js
+++ b/app/gui2/scripts/generateIconMetadata.js
@@ -11,8 +11,8 @@ console.info('Writing icon name type to "./src/util/iconName.ts"...')
 await fs.writeFile(
   './src/util/iconName.ts',
   `\
-// Generated by \`scripts/generateIcons.js\`.
-// Please run \`npm run generate\` to regenerate this file whenever \`icons.svg\` is changed.
+// Generated by \`scripts/generateIconMetadata.js\`.
+// Please run \`npm run generate-metadata\` to regenerate this file whenever \`icons.svg\` is changed.
 import iconNames from '@/util/iconList.json'
 
 export type Icon =
diff --git a/app/gui2/src/assets/icons.svg b/app/gui2/src/assets/icons.svg
index 03a7486e5a..848cee9ef9 100644
--- a/app/gui2/src/assets/icons.svg
+++ b/app/gui2/src/assets/icons.svg
@@ -676,6 +676,14 @@
     <path fill-rule="evenodd" clip-rule="evenodd" d="M0 8C0 6.14915 0.641755 4.35557 1.81592 2.92485C2.99008 1.49413 4.624 0.514797 6.43928 0.153715C8.25456 -0.207366 10.1389 0.0721462 11.7712 0.944627C13.4035 1.81711 14.6827 3.22857 15.391 4.93853C16.0993 6.64848 16.1928 8.55113 15.6555 10.3223C15.1183 12.0934 13.9835 13.6235 12.4446 14.6518C10.9056 15.68 9.05779 16.1429 7.21586 15.9615C5.37394 15.7801 3.65189 14.9656 2.34315 13.6569L3.76867 12.2313C4.74761 13.2103 6.0357 13.8195 7.41347 13.9552C8.79123 14.0909 10.1734 13.7447 11.3245 12.9755C12.4756 12.2064 13.3245 11.0619 13.7263 9.73706C14.1282 8.41224 14.0583 6.98907 13.5285 5.71002C12.9987 4.43097 12.0418 3.3752 10.8208 2.72258C9.59988 2.06996 8.19041 1.86089 6.83258 2.13098C5.47475 2.40107 4.25258 3.13361 3.37431 4.20379C2.49603 5.27397 2.016 6.61557 2.016 8H4L1 12L-2 8H0ZM8 4C7.44772 4 7 4.44771 7 5V8C7 8.37712 7.20876 8.70549 7.51702 8.87584L9.77767 10.181C10.256 10.4572 10.8675 10.2933 11.1437 9.815C11.4198 9.33671 11.256 8.72512 10.7777 8.44897L9 7.42264V5C9 4.44771 8.55228 4 8 4Z" fill="currentColor"></path>
   </symbol>
 
+  <symbol id="record" viewBox="0 0 16 16" width="16" height="16" fill="none">
+    <path d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15Z" fill="currentColor"></path>
+  </symbol>
+
+  <symbol id="record_once" viewBox="0 0 16 16" width="16" height="16" fill="none">
+    <path d="M1.33333 2H.66667C.29848 2 0 2.38376 0 2.85714V13.1429C0 13.6162.29848 14 .66667 14H1.33333C1.70152 14 2 13.6162 2 13.1429V2.85714C2 2.38376 1.70152 2 1.33333 2ZM8 13C10.7614 13 13 10.7614 13 8 13 5.23858 10.7614 3 8 3 5.23858 3 3 5.23858 3 8 3 10.7614 5.23858 13 8 13ZM15.3333 2H14.6667C14.2985 2 14 2.38376 14 2.85714V13.1429C14 13.6162 14.2985 14 14.6667 14H15.3333C15.7015 14 16 13.6162 16 13.1429V2.85714C16 2.38376 15.7015 2 15.3333 2Z" fill="currentColor"></path>
+  </symbol>
+
   <symbol id="right_side_panel" viewBox="0 0 16 16" width="16" height="16" fill="none">
     <path opacity="0.3" d="M0 3C0 1.34315 1.34315 0 3 0H8V16H3C1.34315 16 0 14.6569 0 13V3Z" fill="currentColor"></path>
     <path fill-rule="evenodd" clip-rule="evenodd" d="M13 0H9V16H13C14.6569 16 16 14.6569 16 13V3C16 1.34315 14.6569 0 13 0ZM14 4H11V5H14V4ZM14 6H11V7H14V6ZM11 8H14V9H11V8Z" fill="currentColor"></path>
diff --git a/app/gui2/src/components/ExecutionModeSelector.vue b/app/gui2/src/components/ExecutionModeSelector.vue
deleted file mode 100644
index 9573bb73ad..0000000000
--- a/app/gui2/src/components/ExecutionModeSelector.vue
+++ /dev/null
@@ -1,143 +0,0 @@
-<script setup lang="ts">
-import SvgIcon from '@/components/SvgIcon.vue'
-import { useEvent } from '@/composables/events'
-import { ref } from 'vue'
-
-const props = defineProps<{ modes: string[]; modelValue: string }>()
-const emit = defineEmits<{ execute: []; 'update:modelValue': [mode: string] }>()
-
-const isDropdownOpen = ref(false)
-
-const executionModeSelectorNode = ref<HTMLElement>()
-
-function onDocumentClick(event: MouseEvent) {
-  if (
-    event.target instanceof Node &&
-    executionModeSelectorNode.value?.contains(event.target) === false
-  ) {
-    isDropdownOpen.value = false
-  }
-}
-
-useEvent(document, 'pointerdown', onDocumentClick)
-</script>
-
-<template>
-  <div ref="executionModeSelectorNode" class="ExecutionModeSelector">
-    <div class="execution-mode-button">
-      <div class="execution-mode button" @click.stop="isDropdownOpen = !isDropdownOpen">
-        <span v-text="props.modelValue"></span>
-      </div>
-      <div class="divider"></div>
-      <SvgIcon
-        name="workflow_play"
-        class="play button"
-        draggable="false"
-        @click.stop="
-          () => {
-            isDropdownOpen = false
-            emit('execute')
-          }
-        "
-      />
-    </div>
-    <Transition name="dropdown">
-      <div v-if="isDropdownOpen" class="execution-mode-dropdown">
-        <template v-for="otherMode in props.modes" :key="otherMode">
-          <span
-            v-if="modelValue !== otherMode"
-            class="button"
-            @click.stop="emit('update:modelValue', otherMode), (isDropdownOpen = false)"
-            v-text="otherMode"
-          ></span>
-        </template>
-      </div>
-    </Transition>
-  </div>
-</template>
-
-<style scoped>
-span {
-  display: inline-block;
-  height: 24px;
-  padding: 1px 0px;
-  vertical-align: middle;
-  overflow: clip;
-}
-
-.ExecutionModeSelector {
-  position: relative;
-  color: white;
-}
-
-.execution-mode-button {
-  display: flex;
-  align-items: center;
-  height: 24px;
-  border-radius: var(--radius-full);
-  background: #64b526;
-
-  > .execution-mode {
-    font-weight: 600;
-    padding: 0 8px;
-  }
-
-  > .divider {
-    align-self: stretch;
-    width: 1px;
-    background-color: rgba(0, 0, 0, 0.12);
-  }
-
-  > .play {
-    box-sizing: content-box;
-    padding: 0 8px;
-    color: rgba(255, 255, 255, 0.75);
-  }
-}
-
-.execution-mode-dropdown {
-  display: flex;
-  flex-flow: column;
-  position: absolute;
-  background: #64b526;
-  border-radius: 10px;
-  width: 100%;
-  top: 100%;
-  margin-top: 4px;
-  padding: 4px;
-
-  > span {
-    border-radius: 6px;
-    padding-left: 4px;
-    padding-right: 4px;
-    width: 100%;
-  }
-
-  *:hover {
-    background: var(--color-dim);
-  }
-}
-
-.dropdown-enter-active,
-.dropdown-leave-active {
-  transition: all 0.1s;
-
-  > span {
-    transition: all 0.1s;
-  }
-}
-
-.dropdown-enter-from,
-.dropdown-leave-to {
-  max-height: 0;
-  padding-top: 0;
-  padding-bottom: 0;
-  overflow: hidden;
-
-  > span {
-    padding-top: 0;
-    padding-bottom: 0;
-    max-height: 0;
-  }
-}
-</style>
diff --git a/app/gui2/src/components/GraphEditor.vue b/app/gui2/src/components/GraphEditor.vue
index 3e0b868152..789926de7f 100644
--- a/app/gui2/src/components/GraphEditor.vue
+++ b/app/gui2/src/components/GraphEditor.vue
@@ -38,7 +38,6 @@ import { computed, onMounted, onScopeDispose, onUnmounted, ref, watch } from 'vu
 import { ProjectManagerEvents } from '../../../ide-desktop/lib/dashboard/src/utilities/ProjectManager'
 import { type Usage } from './ComponentBrowser/input'
 
-const EXECUTION_MODES = ['design', 'live']
 // Assumed size of a newly created node. This is used to place the component browser.
 const DEFAULT_NODE_SIZE = new Vec2(0, 24)
 const gapBetweenNodes = 48.0
@@ -334,8 +333,8 @@ const codeEditorHandler = codeEditorBindings.handler({
   },
 })
 
-/** Track play button presses. */
-function onPlayButtonPress() {
+/** Handle record-once button presses. */
+function onRecordOnceButtonPress() {
   projectStore.lsRpcConnection.then(async () => {
     const modeValue = projectStore.executionMode
     if (modeValue == undefined) {
@@ -657,8 +656,7 @@ function handleEdgeDrop(source: AstId, position: Vec2) {
       @canceled="onComponentBrowserCancel"
     />
     <TopBar
-      v-model:mode="projectStore.executionMode"
-      :modes="EXECUTION_MODES"
+      v-model:recordMode="projectStore.recordMode"
       :breadcrumbs="stackNavigator.breadcrumbLabels.value"
       :allowNavigationLeft="stackNavigator.allowNavigationLeft.value"
       :allowNavigationRight="stackNavigator.allowNavigationRight.value"
@@ -666,7 +664,7 @@ function handleEdgeDrop(source: AstId, position: Vec2) {
       @breadcrumbClick="stackNavigator.handleBreadcrumbClick"
       @back="stackNavigator.exitNode"
       @forward="stackNavigator.enterNextNodeFromHistory"
-      @execute="onPlayButtonPress()"
+      @recordOnce="onRecordOnceButtonPress()"
       @fitToAllClicked="zoomToSelected"
       @zoomIn="graphNavigator.scale *= 1.1"
       @zoomOut="graphNavigator.scale *= 0.9"
diff --git a/app/gui2/src/components/RecordControl.vue b/app/gui2/src/components/RecordControl.vue
new file mode 100644
index 0000000000..c1ce4ff89d
--- /dev/null
+++ b/app/gui2/src/components/RecordControl.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import SvgIcon from '@/components/SvgIcon.vue'
+import ToggleIcon from '@/components/ToggleIcon.vue'
+
+const props = defineProps<{ recordMode: boolean }>()
+const emit = defineEmits<{ recordOnce: []; 'update:recordMode': [enabled: boolean] }>()
+</script>
+
+<template>
+  <div class="RecordControl" @pointerdown.stop @pointerup.stop @click.stop>
+    <div class="control left-end">
+      <ToggleIcon
+        icon="record"
+        class="button"
+        :alt="`${props.recordMode ? 'Enable' : 'Disable'} record mode`"
+        :modelValue="props.recordMode"
+        @update:modelValue="emit('update:recordMode', $event)"
+      />
+    </div>
+    <div class="control right-end">
+      <SvgIcon
+        alt="Record once"
+        class="button"
+        name="record_once"
+        draggable="false"
+        @click.stop="() => emit('recordOnce')"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.RecordControl {
+  user-select: none;
+  display: flex;
+  place-items: center;
+  backdrop-filter: var(--blur-app-bg);
+  gap: 1px;
+}
+
+.control {
+  background: var(--color-frame-bg);
+  padding: 8px 8px;
+}
+
+.left-end {
+  border-radius: var(--radius-full) 0 0 var(--radius-full);
+}
+
+.right-end {
+  border-radius: 0 var(--radius-full) var(--radius-full) 0;
+}
+
+.toggledOn {
+  color: #ba4c40;
+}
+
+.button:active {
+  color: #ba4c40;
+}
+</style>
diff --git a/app/gui2/src/components/TopBar.vue b/app/gui2/src/components/TopBar.vue
index 70ae9973a6..772f6dd090 100644
--- a/app/gui2/src/components/TopBar.vue
+++ b/app/gui2/src/components/TopBar.vue
@@ -1,25 +1,24 @@
 <script setup lang="ts">
-import ExecutionModeSelector from '@/components/ExecutionModeSelector.vue'
 import ExtendedMenu from '@/components/ExtendedMenu.vue'
 import NavBar from '@/components/NavBar.vue'
 import type { BreadcrumbItem } from '@/components/NavBreadcrumbs.vue'
+import RecordControl from '@/components/RecordControl.vue'
 import { injectGuiConfig } from '@/providers/guiConfig'
 import { computed } from 'vue'
 
 const props = defineProps<{
   breadcrumbs: BreadcrumbItem[]
-  modes: string[]
-  mode: string
+  recordMode: boolean
   allowNavigationLeft: boolean
   allowNavigationRight: boolean
   zoomLevel: number
 }>()
 const emit = defineEmits<{
-  execute: []
+  recordOnce: []
   back: []
   forward: []
   breadcrumbClick: [index: number]
-  'update:mode': [mode: string]
+  'update:recordMode': [enabled: boolean]
   fitToAllClicked: []
   zoomIn: []
   zoomOut: []
@@ -39,11 +38,10 @@ const barStyle = computed(() => {
 
 <template>
   <div class="TopBar" :style="barStyle">
-    <ExecutionModeSelector
-      :modes="props.modes"
-      :modelValue="props.mode"
-      @update:modelValue="emit('update:mode', $event)"
-      @execute="emit('execute')"
+    <RecordControl
+      :recordMode="props.recordMode"
+      @update:recordMode="emit('update:recordMode', $event)"
+      @recordOnce="emit('recordOnce')"
     />
     <NavBar
       :breadcrumbs="props.breadcrumbs"
diff --git a/app/gui2/src/stores/project/index.ts b/app/gui2/src/stores/project/index.ts
index 7c8cfca244..65476ae893 100644
--- a/app/gui2/src/stores/project/index.ts
+++ b/app/gui2/src/stores/project/index.ts
@@ -685,6 +685,15 @@ export const useProjectStore = defineStore('project', () => {
     yDocsProvider = undefined
   }
 
+  const recordMode = computed({
+    get() {
+      return executionMode.value === 'live'
+    },
+    set(value) {
+      executionMode.value = value ? 'live' : 'design'
+    },
+  })
+
   return {
     setObservedFileName(name: string) {
       observedFileName.value = name
@@ -708,6 +717,7 @@ export const useProjectStore = defineStore('project', () => {
     isOutputContextEnabled,
     stopCapturingUndo,
     executionMode,
+    recordMode,
     dataflowErrors,
     executeExpression,
     disposeYDocsProvider,
diff --git a/app/gui2/stories/TopBar.story.vue b/app/gui2/stories/TopBar.story.vue
index c5acfaa884..5418110066 100644
--- a/app/gui2/stories/TopBar.story.vue
+++ b/app/gui2/stories/TopBar.story.vue
@@ -5,8 +5,7 @@ import { ref } from 'vue'
 import TopBar from '@/components/TopBar.vue'
 
 const title = ref('Mock Project')
-const modes = ref(['design', 'live'])
-const mode = ref('live')
+const recordMode = ref(true)
 const breadcrumbs = ref(['main', 'ad_analytics'])
 </script>
 
@@ -15,21 +14,19 @@ const breadcrumbs = ref(['main', 'ad_analytics'])
     <div style="height: 48px">
       <TopBar
         :title="title"
-        :mode="mode"
-        :modes="modes"
+        :recordMode="recordMode"
         :breadcrumbs="breadcrumbs"
         @back="logEvent('back', [])"
         @forward="logEvent('forward', [])"
-        @execute="logEvent('execute', [])"
+        @recordOnce="logEvent('recordOnce', [])"
         @breadcrumbClick="logEvent('breadcrumbClick', [$event])"
-        @update:mode="logEvent('update:mode', [$event]), (mode = $event)"
+        @update:recordMode="logEvent('update:recordMode', [$event]), (recordMode = $event)"
       />
     </div>
 
     <template #controls>
       <HstText v-model="title" title="title" />
-      <HstSelect v-model="mode" title="mode" :options="modes" />
-      <HstJson v-model="modes" title="modes" />
+      <HstJson v-model="recordMode" title="recordMode" />
       <HstJson v-model="breadcrumbs" title="breadcrumbs" />
     </template>
   </Story>