Display error message when viewed graph doesn't exist.

.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>