diff --git a/data b/data
index ef00bb7..aafdd70 160000
--- a/data
+++ b/data
@@ -1 +1 @@
-Subproject commit ef00bb72c1b885fa6ddc8cf98218c6983528d347
+Subproject commit aafdd706df0de038b0bcf661962fb12e0013b5bf
diff --git a/run.sh b/run.sh
index 5c4426a..8bbffbd 100755
--- a/run.sh
+++ b/run.sh
@@ -64,6 +64,15 @@ gen_data() {
   cp target/upg/demo/alloc data -r
   cp target/upg/demo/core data -r
   cp target/upg/demo/std data -r
+
+  merge_unsafe_fns_json
+}
+
+merge_unsafe_fns_json() {
+  pushd data
+  # Merge all objects by key, and sort by key.
+  jq -s 'add' -S core/navi/unsafe_fns.json alloc/navi/unsafe_fns.json std/navi/unsafe_fns.json >core-alloc-std_unsafe_fns.json
+  popd
 }
 
 gen_data
diff --git a/src/adt.rs b/src/adt.rs
index 3a81e79..f346022 100644
--- a/src/adt.rs
+++ b/src/adt.rs
@@ -1,7 +1,6 @@
 use crate::utils::{FxHashMap, FxIndexSet, ThinVec};
 use derive_more::Debug;
 use rustc_public::{
-    CrateDef,
     mir::ProjectionElem,
     ty::{AdtDef, AdtKind},
 };
diff --git a/src/output/caller.rs b/src/output/caller.rs
index 76f84d8..efd826a 100644
--- a/src/output/caller.rs
+++ b/src/output/caller.rs
@@ -6,7 +6,7 @@ use crate::{
     utils::FxIndexMap,
 };
 use rustc_middle::ty::TyCtxt;
-use rustc_public::{CrateDef, DefId, mir::Safety, rustc_internal::internal, ty::FnDef};
+use rustc_public::{CrateDef, DefId, rustc_internal::internal, ty::FnDef};
 use serde::Serialize;
 
 #[derive(Debug, Serialize)]
@@ -28,7 +28,7 @@ impl Caller {
         Caller {
             fn_def,
             meta: utils::Meta::new(fn_def, tcx),
-            safe: is_safe(fn_def),
+            safe: utils::is_safe(fn_def),
             callees: output_callee(info),
             adts: Default::default(),
             path: def_path(fn_def.def_id(), tcx, navi),
@@ -92,14 +92,10 @@ pub fn output_callee(finfo: &FnInfo) -> FxIndexMap<String, CalleeInfo> {
     for (fn_def, info) in &finfo.callees {
         let fn_def = *fn_def;
         let callee_info = CalleeInfo {
-            safe: is_safe(fn_def),
+            safe: utils::is_safe(fn_def),
             adt: Default::default(),
         };
         map.insert(info.non_instance_name.clone(), callee_info);
     }
     map
 }
-
-fn is_safe(fn_def: FnDef) -> bool {
-    matches!(fn_def.fn_sig().value.safety, Safety::Safe)
-}
diff --git a/src/output/fn_.rs b/src/output/fn_.rs
index f5105a4..a60f705 100644
--- a/src/output/fn_.rs
+++ b/src/output/fn_.rs
@@ -8,16 +8,41 @@ use rustc_public::{mir::Body, ty::FnDef};
 use serde::Serialize;
 
 pub fn dump(map_fn: &FxIndexMap<FnDef, FnInfo>, tcx: TyCtxt, writer: &Writer) {
+    let mut unsafe_fns = FxIndexMap::<String, Unsafe>::with_capacity_and_hasher(
+        map_fn.len() / 4,
+        Default::default(),
+    );
     let mut all_fns =
         FxIndexSet::<FnDef>::with_capacity_and_hasher(map_fn.len() * 2, Default::default());
-    // Collect all functions from caller and direct callees.
-    for (caller, info) in map_fn {
-        all_fns.insert(*caller);
+
+    for (&caller, info) in map_fn {
+        // Collect all functions from caller and direct callees.
+        all_fns.insert(caller);
         for &fn_def in info.callees.keys() {
             all_fns.insert(fn_def);
         }
+
+        // Collect all unsafe fns, including
+        // * unsafe caller
+        // * or safe fn with unsafe callees
+        let unsafe_caller = !utils::is_safe(caller);
+        let unsafe_callee = info.callees.keys().any(|&f| !utils::is_safe(f));
+        if unsafe_caller | unsafe_callee {
+            let fn_name = utils::name(caller, tcx);
+            let kind = match (unsafe_caller, unsafe_callee) {
+                (true, true) => Unsafe::Both,
+                (true, false) => Unsafe::Caller,
+                (false, true) => Unsafe::Callee,
+                (false, false) => unreachable!(),
+            };
+            unsafe_fns.insert(fn_name, kind);
+        }
     }
 
+    // Sort unsafe fns.
+    unsafe_fns.sort_unstable_keys();
+    writer.dump_json("navi", "unsafe_fns", &unsafe_fns);
+
     for fn_def in all_fns {
         let doc = Documentation::new(fn_def, tcx);
 
@@ -39,6 +64,16 @@ pub fn dump(map_fn: &FxIndexMap<FnDef, FnInfo>, tcx: TyCtxt, writer: &Writer) {
     }
 }
 
+#[derive(Debug, Serialize)]
+pub enum Unsafe {
+    /// The function is unsafe, but no unsafe callees inside.
+    Caller,
+    /// At least one unsafe callee is called.
+    Callee,
+    /// The function is unsafe, and calles unsafe functions inside.
+    Both,
+}
+
 #[derive(Debug, Serialize)]
 pub struct Source {
     #[serde(flatten)]
diff --git a/src/output/utils.rs b/src/output/utils.rs
index 9682a89..6f4d889 100644
--- a/src/output/utils.rs
+++ b/src/output/utils.rs
@@ -1,6 +1,11 @@
 use rustc_hir::def_id::DefId as IDefId;
 use rustc_middle::ty::TyCtxt;
-use rustc_public::{CrateDef, rustc_internal::internal, ty::Span};
+use rustc_public::{
+    CrateDef,
+    mir::Safety,
+    rustc_internal::internal,
+    ty::{FnDef, Span},
+};
 use serde::Serialize;
 
 use crate::info_mod::crate_name;
@@ -69,3 +74,8 @@ pub fn doc_internal(did: IDefId, tcx: TyCtxt) -> String {
     }
     buf
 }
+
+/// If the function is unsafe.
+pub fn is_safe(fn_def: FnDef) -> bool {
+    matches!(fn_def.fn_sig().value.safety, Safety::Safe)
+}
diff --git a/ui/app/assets/css/main.css b/ui/app/assets/css/main.css
index 28925b4..c91fceb 100644
--- a/ui/app/assets/css/main.css
+++ b/ui/app/assets/css/main.css
@@ -122,7 +122,7 @@ html, body {
 .upg-node,
 .upg-node-fn,
 .upg-node-unsafe-fn {
-  @apply text-lg font-mono whitespace-nowrap;
+  @apply text-lg font-mono whitespace-nowrap border border-gray-400;
   @variant dark {
     @apply bg-gray-800 text-white border-gray-100;
   };
@@ -141,7 +141,7 @@ html, body {
 .upg-node-adt-fn-kind {
   @apply text-gray-500 font-mono whitespace-nowrap bg-transparent;
 }
-.upg-node-adt { @apply font-bold text-xl dark:border-gray-100/50; }
+.upg-node-adt { @apply font-bold text-xl border dark:border-gray-100/50; }
 /* Unset bottom border if fields are connected to callees. */
 .upg-node-adt-border-b-0 { @apply border-b-0; }
 .upg-node-adt-fn-kind { @apply text-lg border-none; }
@@ -213,3 +213,6 @@ html, body {
     margin-bottom: 0.1rem !important;
   }
 }
+
+/* .fnLink { @apply font-mono; } */
+.unsafeFnLink { @apply text-red-700 dark:text-red-400 hover:font-bold hover:text-red-500 transition-colors; }
diff --git a/ui/app/components/UPG.vue b/ui/app/components/UPG.vue
index 25c8256..9c6889d 100644
--- a/ui/app/components/UPG.vue
+++ b/ui/app/components/UPG.vue
@@ -1,25 +1,27 @@
 <template>
   <div class="upg-left">
     <WidgetTopBar v-model:flowOpts="flowOpts" v-model:crate="crate" v-model="nodeItem" v-model:share="share"
-      :tags="tags" />
+      :tags="tags" :unsafeFns="unsafeFns" />
     <Flow :nodeItem="nodeItem" :tags="tags" v-model:flowOpts="flowOpts" v-model:panelContent="panelContent"
       v-model:adtOpts="adtOpts" />
   </div>
   <div class="upg-right">
     <div class="upg-panel upg-panel-1">
-      <WidgetSelectPanel v-model="upPanel" v-model:panelContent="panelContent" :adtOpts="adtOpts" :tags="tags" />
+      <WidgetSelectPanel v-model="upPanel" v-model:panelContent="panelContent" :adtOpts="adtOpts" :tags="tags"
+        :unsafeFns="unsafeFns" />
     </div>
     <div class="upg-panel">
-      <WidgetSelectPanel v-model="downPanel" v-model:panelContent="panelContent" :adtOpts="adtOpts" :tags="tags" />
+      <WidgetSelectPanel v-model="downPanel" v-model:panelContent="panelContent" :adtOpts="adtOpts" :tags="tags"
+        :unsafeFns="unsafeFns" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import type { FlowOpts } from "~/lib/topbar"
+import type { FlowOpts, UnsafeFns } from "~/lib/topbar"
 import { type DataTags, } from '~/lib/output/tag';
 import { Panel, toPanel, toPanelStr, type PanelContent } from "~/lib/panel"
-import { Crate, FLOW_OPTS, defaultCrateItemQuery, tagURL, toCrate, toViewTypes } from "~/lib/topbar";
+import { Crate, FLOW_OPTS, defaultCrateItemQuery, tagURL, toCrate, toViewTypes, unsafeFnsURL } from "~/lib/topbar";
 import type { AdtOpts } from "~/lib/output/adt";
 
 const router = useRouter();
@@ -46,9 +48,10 @@ function init() {
     if (viewTypes) flowOpts_.view = viewTypes
   }
 
+  const defaultCrate = Crate.alloc
   return {
-    crate: krate ?? Crate.alloc,
-    item: (krate && item && item as string) ?? defaultCrateItemQuery(Crate.std),
+    crate: krate ?? defaultCrate,
+    item: (krate && item && item as string) ?? defaultCrateItemQuery(defaultCrate),
     flowOpts: flowOpts_,
     up: toPanel(query.up as string) ?? Panel.Src,
     down: toPanel(query.down as string) ?? Panel.Doc,
@@ -60,11 +63,14 @@ const crate = ref<Crate>(initState.crate);
 const nodeItem = ref<string>(initState.item);
 watch(crate, root => nodeItem.value = defaultCrateItemQuery(root))
 
+const unsafeFns = ref<UnsafeFns>({})
 const tags = ref<DataTags>({ v_fn: {}, spec: {} });
 watch(crate, val => {
   $fetch(tagURL(val))
     .then(text => tags.value = JSON.parse(text as string))
   // .catch(err => console.log(err));
+  $fetch(unsafeFnsURL(val))
+    .then(text => unsafeFns.value = JSON.parse(text as string))
 }, { immediate: true });
 
 const panelContent = ref<PanelContent>({ nodeItem: nodeItem.value });
diff --git a/ui/app/components/code/Adt.vue b/ui/app/components/code/Adt.vue
index 1f0416f..c5188f6 100644
--- a/ui/app/components/code/Adt.vue
+++ b/ui/app/components/code/Adt.vue
@@ -3,22 +3,22 @@
     <div> Field Access: </div>
     <div v-for="[field, v_data], idx in Object.entries(groupedFieldAccess)" class="adt-fn-group">
       <div class="min-w-15 ml-5 font-mono">{{ idx }}-{{ field }}:</div>
-      <CodeAdtSearchFn v-for="data in v_data" :val="data" />
+      <CodeAdtSearchFn v-for="data in v_data" :val="data" :unsafeFns="unsafeFns" />
     </div>
 
     <div class="adt-fn-group">
       <div> Construct Adt: </div>
-      <CodeAdtSearchFn :val="constructors" />
+      <CodeAdtSearchFn :val="constructors" :unsafeFns="unsafeFns" />
     </div>
 
     <div class="adt-fn-group">
       <div>{{ group_access_self_as_arg.group }}</div>
-      <CodeAdtSearchFn v-for="data in group_access_self_as_arg.data" :val="data" />
+      <CodeAdtSearchFn v-for="data in group_access_self_as_arg.data" :val="data" :unsafeFns="unsafeFns" />
     </div>
 
     <div class="adt-fn-group">
       <div>{{ group_access_self_as_locals.group }}</div>
-      <CodeAdtSearchFn v-for="data in group_access_self_as_locals.data" :val="data" />
+      <CodeAdtSearchFn v-for="data in group_access_self_as_locals.data" :val="data" :unsafeFns="unsafeFns" />
     </div>
   </div>
 </template>
@@ -26,8 +26,9 @@
 <script setup lang="ts">
 import type { AdtPanelItem, DataAdt } from '~/lib/output/adt';
 import { getTag, type DataTags } from '~/lib/output/tag';
+import type { UnsafeFns } from '~/lib/topbar';
 
-const props = defineProps<{ adt?: DataAdt, tags: DataTags }>()
+const props = defineProps<{ adt?: DataAdt, tags: DataTags, unsafeFns: UnsafeFns }>()
 
 function gen(v: string[] | undefined, kind: string, desc: string) {
   const v_fn = v ? v.map(
diff --git a/ui/app/components/code/adt/SearchFn.vue b/ui/app/components/code/adt/SearchFn.vue
index 7775595..9eaea33 100644
--- a/ui/app/components/code/adt/SearchFn.vue
+++ b/ui/app/components/code/adt/SearchFn.vue
@@ -7,15 +7,15 @@
       </UButton>
     </UTooltip>
     <template #content>
-      <WidgetSearchFn :v_fn="val.v_fn" v-model="search" :title="val.desc" />
+      <WidgetSearchFn :v_fn="val.v_fn" :unsafeFns="unsafeFns" v-model="search" :title="val.desc" />
     </template>
   </UModal>
 </template>
 
 <script setup lang="ts">
 import type { AdtPanelItem } from '~/lib/output/adt';
-import type { Search } from '~/lib/topbar';
+import type { Search, UnsafeFns } from '~/lib/topbar';
 
-const props = defineProps<{ val: AdtPanelItem }>()
-const search = ref<Search>({ withTags: false, text: "", page: 1, itemsPerPage: 20 })
+const props = defineProps<{ val: AdtPanelItem, unsafeFns: UnsafeFns }>()
+const search = ref<Search>({ withTags: false, unsafeOnly: false, text: "", page: 1, itemsPerPage: 20 })
 </script>
diff --git a/ui/app/components/widget/SearchFn.vue b/ui/app/components/widget/SearchFn.vue
index 084a0e4..df7a918 100644
--- a/ui/app/components/widget/SearchFn.vue
+++ b/ui/app/components/widget/SearchFn.vue
@@ -3,7 +3,7 @@
     <div class="text-lg font-bold">{{ title }}</div>
     <ol class="list-decimal ml-3 list-inside" :start="view.start">
       <li v-for="item in view.range" class="my-1">
-        <ULink :to="getLink(item.name, $route, $router)">
+        <ULink :to="getLink(item.name, $route, $router)" :class="isUnsafe(item.name) ? 'unsafeFnLink' : ''">
           <span class="font-mono">{{ item.name }}</span>
         </ULink>
         <UBadge v-for="tag in item.tags" :label="tag" color="warning" variant="outline" class="ml-2" />
@@ -16,15 +16,20 @@
     <div class="flex justify-end items-center gap-2">
       <UInput v-model="search.text" placeholder="Search Name Or Tag" />
 
+      <UCheckbox v-model="search.unsafeOnly" label="Only Unsafe Fns" />
       <UCheckbox v-model="search.withTags" label="Only With Tags" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import type { Search, SearchFnItem } from '~/lib/topbar';
+import type { Search, SearchFnItem, UnsafeFns } from '~/lib/topbar';
 
-const props = defineProps<{ v_fn: SearchFnItem[], title: string }>()
+const props = defineProps<{ v_fn: SearchFnItem[], title: string, unsafeFns: UnsafeFns }>()
+
+function isUnsafe(name: string): boolean {
+  return props.unsafeFns[name] ? true : false
+}
 
 const search = defineModel<Search>({ required: true })
 
@@ -32,10 +37,12 @@ const sort = (a: SearchFnItem, b: SearchFnItem) => a.name.localeCompare(b.name)
 const fullFns = computed<SearchFnItem[]>(() => {
   const original = props.v_fn
 
+  const filterUnsafe = search.value.unsafeOnly
   const filterTags = search.value.withTags
   const filterText = search.value.text ? search.value.text.toLowerCase() : ""
-  return (filterTags || filterText) ? original.filter(i => {
+  return (filterUnsafe || filterTags || filterText) ? original.filter(i => {
     let ret = true
+    if (filterUnsafe) ret &&= isUnsafe(i.name)
     if (filterTags) ret &&= i.tags.length !== 0
     if (filterText) ret &&= (
       i.name.toLowerCase().includes(filterText)
diff --git a/ui/app/components/widget/SelectPanel.vue b/ui/app/components/widget/SelectPanel.vue
index d646ea5..0bac923 100644
--- a/ui/app/components/widget/SelectPanel.vue
+++ b/ui/app/components/widget/SelectPanel.vue
@@ -12,7 +12,7 @@
       <CodeSrc v-else-if="selected === Panel.Mir" :src="mir.mir" :isWrapped="isWrapped" />
       <CodeMarkdown v-else-if="selected === Panel.Doc" :doc="doc.doc" :isWrapped="isWrapped" />
       <CodeMarkdown v-else-if="selected === Panel.Tag" :doc="tagDoc" :isWrapped="isWrapped" />
-      <CodeAdt v-else-if="selected === Panel.Adt" :adt="adtOpts.data" :tags="tags" />
+      <CodeAdt v-else-if="selected === Panel.Adt" :adt="adtOpts.data" :tags="tags" :unsafeFns="unsafeFns" />
     </div>
   </ClientOnly>
 </template>
@@ -24,10 +24,11 @@ import { adtDoc, type AdtOpts } from "~/lib/output/adt";
 import { getTagDoc, type DataTags, } from "~/lib/output/tag";
 import { Panel, PANELS, type PanelContent } from "~/lib/panel"
 import getLink from "~/utils/getLink";
+import { type UnsafeFns } from "~/lib/topbar";
 
 const selected = defineModel<Panel>();
 const panelContent = defineModel<PanelContent>("panelContent", { required: true });
-const props = defineProps<{ tags: DataTags, adtOpts: AdtOpts }>()
+const props = defineProps<{ tags: DataTags, unsafeFns: UnsafeFns, adtOpts: AdtOpts }>()
 
 const src = ref<Src>(EMPTY_SRC)
 const mir = ref<Mir>(EMPTY_MIR)
diff --git a/ui/app/components/widget/Tag.vue b/ui/app/components/widget/Tag.vue
index 7792e64..fd34ef5 100644
--- a/ui/app/components/widget/Tag.vue
+++ b/ui/app/components/widget/Tag.vue
@@ -47,7 +47,7 @@
         <div class="flex items-center gap-4">
           <USelectMenu v-model="filterTagNames" multiple clear :items="tagNames" placeholder="Filter Tags"
             variant="ghost" icon="tabler:search" />
-          <UCheckbox label="Toggle Function" color="secondary" v-model="showFunction" />
+          <UCheckbox label="Display Functions" color="secondary" v-model="showFunction" />
         </div>
         <div class="text-xs">
           Used Tag Kind: {{ spec.stat.tag_cardinality }},
diff --git a/ui/app/components/widget/TopBar.vue b/ui/app/components/widget/TopBar.vue
index 85cadb0..ccbd91c 100644
--- a/ui/app/components/widget/TopBar.vue
+++ b/ui/app/components/widget/TopBar.vue
@@ -14,12 +14,13 @@
           <UButton icon="tabler:search" variant="ghost" color="neutral" />
         </UTooltip>
         <template #content>
-          <WidgetSearchFn :v_fn="searchFnItems" v-model="search" :title="`Search All Funtions in Crate ${crate}`" />
+          <WidgetSearchFn :v_fn="searchFnItems" :unsafe-fns="unsafeFns" v-model="search"
+            :title="`Search All Funtions in Crate ${crate}`" />
         </template>
       </UModal>
 
       <USlideover side="left" title="Navigation Tree">
-        <UTooltip text="Navigation">
+        <UTooltip text="Navigation Tree">
           <UButton icon="tabler:sitemap" variant="ghost" />
         </UTooltip>
         <template #body>
@@ -55,9 +56,9 @@
         <UButton icon="tabler:arrow-autofit-height" color="neutral" variant="ghost" @click="fitViewHandle" />
       </UTooltip>
 
-      <UTooltip text="Graph View">
-        <USelect v-model="flowOpts.view" multiple :items="VIEW_TYPES" class="w-50" icon="tabler:braces" />
-      </UTooltip>
+      <!-- <UTooltip text="Graph View"> -->
+      <!--   <USelect v-model="flowOpts.view" multiple :items="VIEW_TYPES" class="w-50" icon="tabler:braces" /> -->
+      <!-- </UTooltip> -->
 
       <UColorModeButton />
       <!-- <ULink to="https://artisan-lab.github.io/RAPx-Book/6.4-unsafe.html" :external="true" target="_blank">Help</ULink> -->
@@ -68,11 +69,11 @@
 <script setup lang="ts">
 import type { TreeItem } from '@nuxt/ui';
 import { getTag, type DataTags } from '~/lib/output/tag';
-import { VIEW_TYPES, NAVI, naviTreeURL, CRATES, } from '~/lib/topbar';
-import type { Navi, FlowOpts, Crate, Search, SearchFnItem } from '~/lib/topbar';
+import { NAVI, naviTreeURL, CRATES, } from '~/lib/topbar';
+import type { Navi, FlowOpts, Crate, Search, SearchFnItem, UnsafeFns } from '~/lib/topbar';
 
 // Props values are passed in, and never mutated here.
-const props = defineProps<{ tags: DataTags }>();
+const props = defineProps<{ tags: DataTags, unsafeFns: UnsafeFns }>();
 
 const flowOpts = defineModel<FlowOpts>('flowOpts', { required: true });
 function fitViewHandle() { if (flowOpts.value) flowOpts.value.fit = true }
@@ -115,7 +116,7 @@ const share = defineModel<boolean>("share", { required: true })
 const shareHandle = () => { share.value = true }
 
 // Search fn
-const search = ref<Search>({ withTags: false, text: "", page: 1, itemsPerPage: 20 })
+const search = ref<Search>({ withTags: true, unsafeOnly: true, text: "", page: 1, itemsPerPage: 20 })
 const searchFnItems = computed<SearchFnItem[]>(() => {
   return Object.keys(navi.value.name_to_id).map(name => {
     return { name, tags: getTag(name, props.tags, true) }
diff --git a/ui/app/lib/topbar.ts b/ui/app/lib/topbar.ts
index 1bff672..795f9a3 100644
--- a/ui/app/lib/topbar.ts
+++ b/ui/app/lib/topbar.ts
@@ -150,7 +150,7 @@ export function defaultCrateItemQuery(crate: Crate): string {
   switch (crate) {
     case Crate.std: return "std::time::Instant::now";
     case Crate.core: return "core::str::<impl str>::len";
-    case Crate.alloc: return "alloc::vec::Vec::<T, A>::push";
+    case Crate.alloc: return "alloc::vec::Vec::<T, A>::set_len";
     case Crate.ostd: return "ostd::init";
     default: return "";
   }
@@ -195,6 +195,18 @@ export type BarPlotData = {
   value: number,
 }
 
-export type Search = { withTags: boolean, text: string, page: number, itemsPerPage: number }
+export type Search = { withTags: boolean, unsafeOnly: boolean, text: string, page: number, itemsPerPage: number }
 
 export type SearchFnItem = { name: string, tags: string[] }
+
+export function unsafeFnsURL(crate: Crate) {
+  return `${BASE_URL}/${crate}/navi/unsafe_fns.json`
+}
+
+export type UnsafeFns = {
+  [key: string]: Unsafe
+}
+
+export enum Unsafe {
+  Caller, Callee, Both,
+}
diff --git a/ui/app/utils/graph.ts b/ui/app/utils/graph.ts
index cddf76e..d654fc9 100644
--- a/ui/app/utils/graph.ts
+++ b/ui/app/utils/graph.ts
@@ -1,7 +1,7 @@
-import { Position, type Edge, type Node } from "@vue-flow/core";
+import { MarkerType, Position, type Edge, type Node } from "@vue-flow/core";
 import type { ELK, ElkNode, LayoutOptions } from "elkjs";
-import type { Caller, AdtFnKind, Callees, CalleeInfo, FieldAccessKind } from "~/lib/output";
-import { idAdt, idEdge, idAdtFnKind, idTag, idField, idCalleeWithAdt, idCalleeKindAdt } from "~/lib/graph";
+import { FieldAccessKind, type Caller, AdtFnKind, type Callees, type CalleeInfo } from "~/lib/output";
+import { idAdt, idEdge, idAdtFnKind, idTag, idField, idCalleeWithAdt, idCalleeKindAdt, idCalleeNonGeneric } from "~/lib/graph";
 import { ViewType, type FlowOpts } from "~/lib/topbar";
 import updateNodePosition from "./updateNodePosition";
 import { getTag, type DataTags } from "~/lib/output/tag";
@@ -23,7 +23,7 @@ const FnLayoutOptions = {
 
 const AdtLayoutOptions = {
   "elk.nodeLabels.placement": "INSIDE H_CENTER V_TOP",
-  "elk.direction": "LEFT",
+  "elk.direction": "RIGHT",
   "elk.aspectRatio": "10.0",
 };
 
@@ -120,6 +120,72 @@ export class PlotConfig {
     });
   }
 
+  /** Generate unsafe callee nodes with tags inside, but without adts. */
+  calleeUnsafe(callees: Callees): ElkNode[] {
+    const nodes: ElkNode[] = []
+
+    for (const [name, info] of Object.entries(callees)) {
+      // if (info.safe) continue;
+
+      const labelDim = this.size(name);
+      const id = idCalleeNonGeneric(name);
+      this.id_to_item[id] = { name, kind: info.safe ? NodeKind.SafeFn : NodeKind.UnsafeFn };
+      const tags = this.tagChildren(name)
+      nodes.push({
+        id, layoutOptions: FnLayoutOptions,
+        labels: [{ text: name, ...labelDim }],
+        children: this.view.tags ? tags : [],
+        ...this.fnDim(tags, labelDim)
+      })
+    }
+
+    return nodes
+  }
+
+  elkNode_to_vueFlowNode(node: ElkNode, opts: any = {}): Node {
+    const id = node.id
+
+    const kind = this.id_to_item[id]!.kind
+    let type = "no-handle"
+    switch (kind) {
+      case NodeKind.Tag: { type = "tag"; break };
+      case NodeKind.SafeFn: case NodeKind.UnsafeFn: { type = "output"; break };
+      case NodeKind.Field: { type = "input"; break };
+      case NodeKind.UnsafeRoot: case NodeKind.SafeRoot: { type = "default"; break };
+    }
+
+    const labelWidth = node.labels![0]!.width!
+    return {
+      id, label: node.labels![0]!.text!, width: Math.max(node.width!, labelWidth), height: node.height,
+      position: { x: node.x!, y: node.y! }, class: this.nodeClass(id), type,
+      sourcePosition: Position.Right, targetPosition: Position.Left,
+      ...opts
+    }
+  }
+
+  fieldHeaderNode(x: number, y: number, adt: string, nFields: number, parent: string): Node {
+    const id = `FieldHeader@${adt}`
+    this.id_to_item[id] = { name: adt, kind: NodeKind.FieldHeader }
+    const label = (nFields === 1) ? "Field" : "Fields"
+    const dim = this.size(label)
+    return {
+      id, label, width: dim.width, height: dim.height, parentNode: parent,
+      position: { x, y }, class: this.nodeClass(id), type: "no-handle",
+    }
+  }
+
+  callerHeaderNode(x: number, y: number, caller: string, kind: AdtFnKind, parent: string): Node {
+    const id = `CallerHeader@${caller}`
+    this.id_to_item[id] = { name: caller, kind: NodeKind.CallerHeader }
+    const label = kind as string
+    const dim = this.size(label)
+    return {
+      id, label, width: dim.width, height: dim.height, parentNode: parent,
+      position: { x, y }, class: this.nodeClass(id), type: "no-handle",
+    }
+  }
+
+
   nodeClass(id: string) {
     let ret = nodeKindClass(this.id_to_item[id]!.kind)
     if (this.adt_border_b_0.has(id)) {
@@ -153,6 +219,10 @@ export class PlotConfig {
   edgeType(): string {
     return this.flowOpts.edge as string
   }
+
+  nodeKind(id: string) {
+    return this.id_to_item[id]!.kind
+  }
 }
 
 export enum NodeKind {
@@ -167,6 +237,7 @@ export enum NodeKind {
   FnKind,
   Field,
   FieldHeader,
+  CallerHeader,
 }
 
 function nodeKindClass(kind: NodeKind) {
@@ -177,7 +248,7 @@ function nodeKindClass(kind: NodeKind) {
     case NodeKind.Adt: return "upg-node-adt";
     case NodeKind.FnKind: return "upg-node-adt-fn-kind";
     case NodeKind.Field: return "upg-node-fn";
-    case NodeKind.FieldHeader: return "upg-node-adt-fn-kind";
+    case NodeKind.FieldHeader: case NodeKind.CallerHeader: return "upg-node-adt-fn-kind";
     default: return "";
   }
 }
@@ -229,8 +300,9 @@ export class Plot {
   }
 
   async plot(fn: Caller) {
-    if (this.config.view.adts) await this.callee_adt(fn)
-    else await this.callee_tag(fn);
+    // if (this.config.view.adts) await this.callee_adt(fn)
+    // else await this.callee_tag(fn);
+    await this.caller_adt(fn)
   }
 
   /** Generate the graph with callees and optional tags. */
@@ -455,4 +527,229 @@ export class Plot {
     edgesBetweenFieldsAndCallee.forEach(e => edges.push(e))
     Object.assign(this, { nodes, edges });
   }
+
+  /** Generate the graph: caller as a method of an adt, and unsafe callees. */
+  async caller_adt(fn: Caller) {
+    this.clear()
+    const root = this.rootNode(fn);
+    let rootNode = root// possibly with adt
+    const config = this.config;
+    const id_to_item = this.config.id_to_item;
+    const edgeType = config.edgeType();
+    const edges: Edge[] = []
+
+    const callees = this.config.calleeUnsafe(fn.callees)
+    // Connect caller to callees: | caller (source) | -> | callee (target) |
+    callees.forEach(c => edges.push({ id: idEdge(root.id, c.id), source: root.id, target: c.id, type: edgeType }))
+
+    // Determine the caller's method adt
+    let adt: { name: string, kind: AdtFnKind, field: { name: string, access: FieldAccessKind }[] } | null = null
+    for (const [name, info] of Object.entries(fn.adts)) {
+      const kind = info.kind
+      switch (kind) {
+        case AdtFnKind.MethodImmutableRefReceiver:
+        case AdtFnKind.MethodMutableRefReceiver:
+        case AdtFnKind.MethodOwnedReceiver: {
+          const field = Object.entries(info.field)
+            .map(([name, access]) => ({ name, access }))
+            .filter(f => f.access !== FieldAccessKind.Other)
+          adt = { name, kind, field }
+        }
+      }
+    }
+
+    if (adt !== null) {
+      const children: ElkNode[] = []
+
+      for (const field of adt.field) {
+        const fieldID = idField(adt.name, field.name)
+        id_to_item[fieldID] = { name: field.name, kind: NodeKind.Field }
+        const dimField = config.size(field.name)
+        children.push({
+          id: fieldID, layoutOptions: FnLayoutOptions,
+          labels: [{ text: field.name, ...dimField }],
+          ...dimField
+        })
+        // | field (source) | -> | caller (target) |
+        edges.push({
+          id: idEdge(root.id, fieldID,), source: fieldID, target: root.id, type: edgeType,
+          label: field.access as string, markerStart: { type: MarkerType.Arrow, color: 'gray', width: 25, height: 25 }
+        })
+      }
+
+      children.push(root)
+
+      const adtID = idAdt(adt.name)
+      id_to_item[adtID] = { name: adt.name, kind: NodeKind.Adt }
+      const dimAdt = config.size(adt.name)
+      // Override rootNode.
+      rootNode = {
+        id: adtID, children, layoutOptions: AdtLayoutOptions,
+        labels: [{ text: adt.name, ...dimAdt }],
+      }
+    }
+
+    const graph: ElkNode = {
+      id: "__root",
+      layoutOptions: config.rootLayoutOptions,
+      children: [rootNode, ...callees],
+      edges: edges.map(e => ({ id: e.id, sources: [e.source], targets: [e.target] }))
+    };
+
+    const tree = await this.elk.layout(graph);
+
+    const nodes: Node[] = [];
+    for (const adtOrCallerOrCallee of tree.children ?? []) {
+      const parent = config.elkNode_to_vueFlowNode(adtOrCallerOrCallee)
+      nodes.push(parent);
+
+      const isAdt = config.nodeKind(adtOrCallerOrCallee.id) === NodeKind.Adt
+      if (isAdt) {
+        for (const fieldOrCaller of adtOrCallerOrCallee.children ?? []) {
+          const child = config.elkNode_to_vueFlowNode(fieldOrCaller, { parentNode: parent.id })
+          nodes.push(child)
+
+          const isCaller = root.id === fieldOrCaller.id
+          if (isCaller) {
+            // Enlarge adt node when caller has been enlarged due to label width.
+            // NOTE: must use vue node instead of elk node because we ignore elk node by using label width.
+            const adtNode = parent
+            const caller = child
+            const gapX = (adtNode.width as number) - caller.position.x - (caller.width as number)
+            const spacingX = config.px * 3
+            if (gapX < spacingX) (adtNode.width as number) += ((gapX < 0) ? (-gapX) : 0) + spacingX
+
+            const gapY = (adtNode.height as number) - caller.position.y - (caller.height as number)
+            const spacingY = config.px
+            if (gapY < spacingY) (adtNode.height as number) += ((gapY < 0) ? (-gapY) : 0) + spacingY
+          }
+
+          for (const tag of fieldOrCaller.children ?? []) {
+            nodes.push(config.elkNode_to_vueFlowNode(tag, { parentNode: fieldOrCaller.id }))
+          }
+        }
+      } else {
+        const func = adtOrCallerOrCallee
+        for (const tag of func.children ?? []) {
+          nodes.push(config.elkNode_to_vueFlowNode(tag, { parentNode: func.id }))
+        }
+      }
+    }
+
+    // Refine layout with caller and callees.
+    const refinedNodes = nodes.filter(n => {
+      switch (id_to_item[n.id]!.kind) {
+        // Always inculde callees.
+        case NodeKind.UnsafeFn: case NodeKind.SafeFn: return true;
+        // Include caller if no adt wraps it.
+        case NodeKind.UnsafeRoot: case NodeKind.SafeRoot: return adt ? false : true;
+        // Include adt if adt wraps the caller.
+        case NodeKind.Adt: return adt ? true : false;
+        // Don't relayout other nodes.
+        default: return false;
+      }
+    })
+
+    const refinedEdges: Edge[] = []
+    if (adt) {
+      // Relayout adt node with callees.
+      const adtID = idAdt(adt.name)
+      callees.forEach(c => refinedEdges.push({
+        id: idEdge(adtID, c.id), source: adtID, target: c.id, type: edgeType
+      }))
+    } else {
+      callees.forEach(c => refinedEdges.push({
+        id: idEdge(root.id, c.id), source: root.id, target: c.id, type: edgeType
+      }))
+    }
+
+    updateNodePosition(refinedNodes, refinedEdges);
+
+    if (adt) {
+      // Don't overlap large adt node with callees.
+      const fieldNodes = []
+      let adtNode: Node | null = null
+      let callerNode: Node | null = null
+
+      for (const node of nodes) {
+        switch (config.nodeKind(node.id)) {
+          case NodeKind.Field: { fieldNodes.push(node); break };
+          case NodeKind.Adt: { adtNode = node; break };
+          case NodeKind.UnsafeRoot: case NodeKind.SafeRoot: { callerNode = node; break };
+        }
+      }
+
+      if (adtNode !== null) {
+        const adtMaxX = (typeof adtNode.width === "number") ? (adtNode.position.x + adtNode.width) : null
+        if (adtMaxX) {
+          for (const node of refinedNodes) {
+            const kind = config.nodeKind(node.id)
+            if (kind === NodeKind.UnsafeFn || kind === NodeKind.SafeFn) {
+              const x = node.position.x
+              if (x < adtMaxX) node.position.x = adtMaxX + 50
+            }
+          }
+        }
+
+        // Enlarge fields and caller spacing.
+        let enlarge_spacing = false
+        let firstFieldY: number | null = null
+        let firstFieldX: number | null = null
+        const spacing = config.px * 7 // in the unit of a mono char with
+        for (const field of fieldNodes) {
+          const x = field.position.x
+          const gap = callerNode!.position.x - x - (field.width as number)
+          if (gap < spacing) enlarge_spacing = true
+
+          const y = field.position.y
+          firstFieldY = firstFieldY ? Math.min(y, firstFieldY) : y
+          firstFieldX = firstFieldX ? Math.min(x, firstFieldX) : x
+        }
+
+        if (enlarge_spacing) {
+          // Move adt node left. All elements inside will also be moved left.
+          adtNode.position.x -= spacing;
+          // Widen adt node for enclosing all elements .
+          adtNode.width = adtNode.width as number + spacing
+          // Move caller node right.
+          callerNode!.position.x += spacing
+        }
+
+        // Add field and caller header
+        if (firstFieldY !== null && firstFieldX !== null) {
+          const parent = adtNode!.id
+          const y = firstFieldY - config.px * 3
+          const fieldHeader = config.fieldHeaderNode(firstFieldX, y, adt.name, fieldNodes.length, parent)
+          nodes.push(fieldHeader)
+
+          const callerHeaderX = (callerNode!.position.x + (callerNode!.width as number)) / 2
+          const callerY = callerNode!.position.y - config.px * 3
+          const callerHeader = config.callerHeaderNode(callerHeaderX, callerY, fn.name, adt.kind, parent)
+          nodes.push(callerHeader)
+        }
+      }
+    } else {
+      let calleeNodes: Node[] = []
+      let callerNode: Node | null = null
+
+      for (const node of nodes) {
+        switch (config.nodeKind(node.id)) {
+          case NodeKind.UnsafeFn: case NodeKind.SafeFn: { calleeNodes.push(node); break };
+          case NodeKind.UnsafeRoot: case NodeKind.SafeRoot: { callerNode = node; break };
+        }
+      }
+
+      // Don't overlap caller and callees.
+      let calleeX: number | null = null
+      calleeNodes.forEach(c => calleeX = calleeX ? Math.min(c.position.x) : c.position.x)
+      if (calleeX !== null) {
+        const gap = calleeX - callerNode!.position.x - (callerNode!.width as number)
+        const spacing = 100
+        // Move left if the gap is narrow. Use abs for negative gap (overlapping).
+        if (gap < spacing) callerNode!.position.x -= (Math.abs(gap) + spacing)
+      }
+    }
+
+    Object.assign(this, { nodes, edges });
+  }
 }