Graph calculator improvmentes

frontend/app/pages/graph.vue

@@ -1,21 +1,18 @@
 <script setup lang="ts">
-import type { GraphEdgeDto, GraphNodeDto } from '~/components/GraphView.vue'
-
-export interface GraphDto {
-  nodes: GraphNodeDto[]
-  edges: GraphEdgeDto[]
-}
+/* The link map's own address. Usually the map fills the page here; but when
+   the book has this page open — laid on it from the search popup, beside the
+   open articles — the pane holds the instance, and this host says nothing
+   over it (the way the article route lets the book draw its pages). */
 
 /* matches the home page's transition so the two surfaces slide past
    each other the way the reader does (see main.scss) */
 definePageMeta({ transition: { name: 'page', mode: 'out-in' } })
 
-const api = `${useRuntimeConfig().public.apiBase}/api`
+const route = useRoute()
 const { t } = useI18n()
+const { tabs } = useArticleTabs()
 
-const { data, status, error } = await useFetch<GraphDto>(`${api}/articles/graph`, {
-  default: () => ({ nodes: [], edges: [] }),
-})
+const heldByBook = computed(() => tabAt(tabs.value, route.path)?.tool != null)
 
 useSeoMeta({
   title: () => t('graph.metaTitle'),
@@ -24,27 +21,5 @@ useSeoMeta({
 </script>
 
 <template>
-  <div class="graph-stage">
-    <div v-if="error" class="graph-state">
-      <div class="banner">
-        <span class="glyph">!</span>
-        <span v-html="t('common.apiDown')"></span>
-      </div>
-    </div>
-
-    <GraphView
-      v-else-if="status !== 'pending' && data.nodes.length"
-      :nodes="data.nodes"
-      :edges="data.edges"
-    />
-
-    <div v-else-if="status !== 'pending'" class="graph-state">
-      <div class="empty">
-        <div class="glyph">∅</div>
-        <h3>{{ t('graph.emptyTitle') }}</h3>
-        <p>{{ t('graph.emptyText') }}</p>
-        <NuxtLink to="/new" class="btn btn-primary">{{ t('common.startWriting') }}</NuxtLink>
-      </div>
-    </div>
-  </div>
+  <GraphStage v-if="!heldByBook" />
 </template>