Display error message when viewed graph doesn't exist. (#11452)

Fixes #11211

<img width="258" alt="image" src="https://github.com/user-attachments/assets/7adea4f6-774a-49ac-8c86-5e785df2acff">

When the "go back" button is clicked, the user is sent back to the `main` function graph. The breadcrumbs are also present on that view and can be used for navigation.

Current design of the error state is improvised, likely to be changed once we have some design guidance about it.

.gitattributes

@@ -1,2 +1,3 @@
 *.enso text eol=lf
 *.png binary
+CHANGELOG.md merge=union

CHANGELOG.md

@@ -17,6 +17,8 @@
   re-opening][11435]
 - [Added application version to the title bar.][11446]
 - [Added "open grouped components" action to the context menu.][11447]
+- [Added an error message screen displayed when viewing a deleted
+  component.][11452]
 
 [11151]: https://github.com/enso-org/enso/pull/11151
 [11271]: https://github.com/enso-org/enso/pull/11271
@@ -25,10 +27,11 @@
 [11383]: https://github.com/enso-org/enso/pull/11383
 [11388]: https://github.com/enso-org/enso/pull/11388
 [11398]: https://github.com/enso-org/enso/pull/11398
-[11398]: https://github.com/enso-org/enso/pull/11433
+[11433]: https://github.com/enso-org/enso/pull/11433
 [11435]: https://github.com/enso-org/enso/pull/11435
 [11446]: https://github.com/enso-org/enso/pull/11446
 [11447]: https://github.com/enso-org/enso/pull/11447
+[11452]: https://github.com/enso-org/enso/pull/11452
 
 #### Enso Standard Library
 

app/gui/src/project-view/components/GraphEditor.vue

@@ -21,6 +21,7 @@ import { performCollapse, prepareCollapsedInfo } from '@/components/GraphEditor/
 import type { NodeCreationOptions } from '@/components/GraphEditor/nodeCreation'
 import { useGraphEditorToasts } from '@/components/GraphEditor/toasts'
 import { Uploader, uploadedExpression } from '@/components/GraphEditor/upload'
+import GraphMissingView from '@/components/GraphMissingView.vue'
 import GraphMouse from '@/components/GraphMouse.vue'
 import PlusButton from '@/components/PlusButton.vue'
 import SceneScroller from '@/components/SceneScroller.vue'
@@ -214,6 +215,7 @@ function panToSelected() {
 // == Breadcrumbs ==
 
 const stackNavigator = provideStackNavigator(projectStore, graphStore)
+const graphMissing = computed(() => graphStore.moduleRoot != null && !graphStore.methodAst.ok)
 
 // === Toasts ===
 
@@ -724,25 +726,29 @@ const documentationEditorFullscreen = ref(false)
   >
     <div class="vertical">
       <div ref="viewportNode" class="viewport" @click="handleClick">
-        <GraphNodes
-          @nodeOutputPortDoubleClick="handleNodeOutputPortDoubleClick"
-          @enterNode="(id) => stackNavigator.enterNode(id)"
-          @createNodes="createNodesFromSource"
-          @toggleDocPanel="toggleRightDockHelpPanel"
-        />
-        <GraphEdges :navigator="graphNavigator" @createNodeFromEdge="handleEdgeDrop" />
-        <ComponentBrowser
-          v-if="componentBrowserVisible"
-          ref="componentBrowser"
-          :navigator="graphNavigator"
-          :nodePosition="componentBrowserNodePosition"
-          :usage="componentBrowserUsage"
-          :associatedElements="componentBrowserElements"
-          @accepted="commitComponentBrowser"
-          @canceled="hideComponentBrowser"
-          @selectedSuggestionId="displayedDocs = $event"
-          @isAiPrompt="aiMode = $event"
-        />
+        <GraphMissingView v-if="graphMissing" />
+        <template v-else>
+          <GraphNodes
+            @nodeOutputPortDoubleClick="handleNodeOutputPortDoubleClick"
+            @enterNode="(id) => stackNavigator.enterNode(id)"
+            @createNodes="createNodesFromSource"
+            @toggleDocPanel="toggleRightDockHelpPanel"
+          />
+          <GraphEdges :navigator="graphNavigator" @createNodeFromEdge="handleEdgeDrop" />
+          <ComponentBrowser
+            v-if="componentBrowserVisible"
+            ref="componentBrowser"
+            :navigator="graphNavigator"
+            :nodePosition="componentBrowserNodePosition"
+            :usage="componentBrowserUsage"
+            :associatedElements="componentBrowserElements"
+            @accepted="commitComponentBrowser"
+            @canceled="hideComponentBrowser"
+            @selectedSuggestionId="displayedDocs = $event"
+            @isAiPrompt="aiMode = $event"
+          />
+          <PlusButton title="Add Component" @click.stop="addNodeDisconnected()" />
+        </template>
         <TopBar
           v-model:recordMode="projectStore.recordMode"
           v-model:showColorPicker="showColorPicker"
@@ -757,7 +763,6 @@ const documentationEditorFullscreen = ref(false)
           @collapseNodes="collapseNodes"
           @removeNodes="deleteSelected"
         />
-        <PlusButton title="Add Component" @click.stop="addNodeDisconnected()" />
         <SceneScroller
           :navigator="graphNavigator"
           :scrollableArea="Rect.Bounding(...graphStore.visibleNodeAreas)"

app/gui/src/project-view/components/GraphMissingView.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import SvgIcon from '@/components/SvgIcon.vue'
+import { useProjectStore } from '@/stores/project'
+import StandaloneButton from './StandaloneButton.vue'
+
+const project = useProjectStore()
+
+function goToMain() {
+  project.executionContext.desiredStack = [project.executionContext.getStackBottom()]
+}
+</script>
+
+<template>
+  <div class="GraphMissingView">
+    <SvgIcon class="header-icon" name="error" />
+    <span>The component you are viewing no longer exists.</span>
+    <StandaloneButton icon="home2" label="Go back" @click="goToMain" />
+  </div>
+</template>
+
+<style scoped>
+.GraphMissingView {
+  background-image: linear-gradient(to bottom, #00000000, #00000030);
+  background-size: 100% 100%;
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+}
+
+.header-icon {
+  --icon-size: 64px;
+}
+</style>

app/gui/src/project-view/components/StandaloneButton.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { URLString } from '@/util/data/urlString'
+import type { Icon } from '@/util/iconName'
+import SvgButton from './SvgButton.vue'
+
+const props = defineProps<{
+  icon?: Icon | URLString | undefined
+  label?: string | undefined
+  disabled?: boolean
+  title?: string | undefined
+}>()
+</script>
+
+<template>
+  <div class="StandaloneButton">
+    <SvgButton v-bind="props" :name="icon" />
+  </div>
+</template>
+
+<style scoped>
+.StandaloneButton {
+  background-color: var(--color-frame-bg);
+  padding: 4px;
+  border-radius: var(--radius-full);
+}
+</style>

app/gui/src/project-view/components/SvgButton.vue

@@ -5,7 +5,7 @@ import type { URLString } from '@/util/data/urlString'
 import type { Icon } from '@/util/iconName'
 
 const _props = defineProps<{
-  name: Icon | URLString
+  name?: Icon | URLString | undefined
   label?: string | undefined
   disabled?: boolean
   title?: string | undefined
@@ -14,7 +14,7 @@ const _props = defineProps<{
 
 <template>
   <MenuButton :disabled="disabled" class="SvgButton" :title="title">
-    <SvgIcon :name="name" />
+    <SvgIcon v-if="name" :name="name" />
     <div v-if="label">{{ label }}</div>
   </MenuButton>
 </template>