fastapi-voyager 0.7.2__tar.gz → 0.7.4__tar.gz

{fastapi_voyager-0.7.2 → fastapi_voyager-0.7.4}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: fastapi-voyager
-Version: 0.7.2
+Version: 0.7.4
 Summary: Visualize FastAPI application's routing tree and dependencies
 Project-URL: Homepage, https://github.com/allmonday/fastapi-voyager
 Project-URL: Source, https://github.com/allmonday/fastapi-voyager
@@ -204,6 +204,11 @@ TODO: ...
 ## Changelog
 
 - 0.7:
+    - 0.7.4
+        - optimize tag/route, move to left. 
+        - fresh on change, no need to click generate any more.
+    - 0.7.3
+        - fix `module_color` failure
     - 0.7.2
         - keep links inside filtered nodes.
     - 0.7.1

{fastapi_voyager-0.7.2 → fastapi_voyager-0.7.4}/README.md

@@ -177,6 +177,11 @@ TODO: ...
 ## Changelog
 
 - 0.7:
+    - 0.7.4
+        - optimize tag/route, move to left. 
+        - fresh on change, no need to click generate any more.
+    - 0.7.3
+        - fix `module_color` failure
     - 0.7.2
         - keep links inside filtered nodes.
     - 0.7.1

{fastapi_voyager-0.7.2 → fastapi_voyager-0.7.4}/src/fastapi_voyager/render.py

@@ -1,3 +1,4 @@
+from typing import Optional
 from fastapi_voyager.type import SchemaNode, ModuleNode, Link, Tag, Route, FieldType, PK, ModuleRoute
 from fastapi_voyager.module import build_module_schema_tree, build_module_route_tree
 
@@ -61,33 +62,44 @@ class Renderer:
         else:
             raise ValueError(f'Unknown link type: {link.type}')
 
-    def render_module_schema(self, mod: ModuleNode) -> str:
-        color = self.module_color.get(mod.fullname)
-        inner_nodes = [
-            f'''
-                "{node.id}" [
-                    label = {self.render_schema_label(node)}
-                    shape = "plain"
-                    margin="0.5,0.1"
-                ];''' for node in mod.schema_nodes
-        ]
-        inner_nodes_str = '\n'.join(inner_nodes)
-        child_str = '\n'.join(self.render_module_schema(m) for m in mod.modules)
-        return f'''
-            subgraph cluster_module_{mod.fullname.replace('.', '_')} {{
-                tooltip="{mod.fullname}"
-                color = "#666"
-                style="rounded"
-                label = "  {mod.name}"
-                labeljust = "l"
-                {(f'pencolor = "{color}"' if color else 'pencolor="#ccc"')}
-                {(f'penwidth = 3' if color else 'penwidth=""')}
-                {inner_nodes_str}
-                {child_str}
-            }}'''
+    def render_module_schema_wrapper(self, mods: list[ModuleNode]) -> str:
+        module_color_flag = set(self.module_color.keys())
+        print(module_color_flag)
+
+        def render_module_schema(mod: ModuleNode) -> str:
+            color: Optional[str] = None
+
+            for k in module_color_flag:
+                if mod.fullname.startswith(k):
+                    module_color_flag.remove(k)
+                    color = self.module_color[k]
+                    break
+
+            inner_nodes = [
+                f'''
+                    "{node.id}" [
+                        label = {self.render_schema_label(node)}
+                        shape = "plain"
+                        margin="0.5,0.1"
+                    ];''' for node in mod.schema_nodes
+            ]
+            inner_nodes_str = '\n'.join(inner_nodes)
+            child_str = '\n'.join(render_module_schema(m) for m in mod.modules)
+            return f'''
+                subgraph cluster_module_{mod.fullname.replace('.', '_')} {{
+                    tooltip="{mod.fullname}"
+                    color = "#666"
+                    style="rounded"
+                    label = "  {mod.name}"
+                    labeljust = "l"
+                    {(f'pencolor = "{color}"' if color else 'pencolor="#ccc"')}
+                    {(f'penwidth = 3' if color else 'penwidth=""')}
+                    {inner_nodes_str}
+                    {child_str}
+                }}'''
+        return '\n'.join(render_module_schema(m) for m in mods)
     
     def render_module_route(self, mod: ModuleRoute) -> str:
-        color = self.module_color.get(mod.fullname)
         # Inner route nodes, same style as flat route_str
         inner_nodes = [
             f'''
@@ -106,8 +118,6 @@ class Renderer:
                 style="rounded"
                 label = "  {mod.name}"
                 labeljust = "l"
-                {(f'pencolor = "{color}"' if color else 'pencolor="#ccc"')}
-                {(f'penwidth = 3' if color else 'penwidth=""')}
                 {inner_nodes_str}
                 {child_str}
             }}'''
@@ -126,7 +136,7 @@ class Renderer:
         ])
 
 
-        module_schemas_str = '\n'.join(self.render_module_schema(m) for m in module_schemas)
+        module_schemas_str = self.render_module_schema_wrapper(module_schemas)
         module_routes_str = '\n'.join(self.render_module_route(m) for m in module_routes)
         link_str = '\n'.join(self.render_link(link) for link in links)
 

{fastapi_voyager-0.7.2 → fastapi_voyager-0.7.4}/src/fastapi_voyager/version.py

@@ -1,2 +1,2 @@
 __all__ = ["__version__"]
-__version__ = "0.7.2"
+__version__ = "0.7.4"

fastapi_voyager-0.7.4/src/fastapi_voyager/web/index.html

@@ -0,0 +1,383 @@
+<html>
+  <head>
+    <title>FastAPI Voyager</title>
+    <meta name="theme-color" content="#ffffff" />
+    <link rel="stylesheet" href="fastapi-voyager-static/graphviz.svg.css" />
+    <link rel="stylesheet" href="fastapi-voyager-static/quasar.min.css" />
+    <!-- App Icons / Favicons -->
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="fastapi-voyager-static/icon/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="fastapi-voyager-static/icon/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="fastapi-voyager-static/icon/favicon-16x16.png"
+    />
+    <link
+      rel="icon"
+      href="fastapi-voyager-static/icon/favicon.ico"
+      sizes="any"
+    />
+    <link rel="manifest" href="fastapi-voyager-static/icon/site.webmanifest" />
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
+      rel="stylesheet"
+      type="text/css"
+    />
+  </head>
+
+  <style>
+    html,
+    body {
+      height: 100%;
+      margin: 0;
+    }
+    body {
+      display: flex;
+      flex-direction: column;
+    }
+    /* Quasar select menu max-height for scroll */
+    .select-popup {
+      max-height: 400px;
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+    #graph {
+      flex: 1 1 auto;
+      overflow: auto;
+    }
+  </style>
+  <body>
+    <div id="q-app" class="column" style="height: 100%">
+      <div
+        v-if="state.initializing"
+        style="
+          position: fixed;
+          inset: 0;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          z-index: 2000;
+          background: rgba(255, 255, 255, 0.85);
+          font-size: 18px;
+          font-family: Roboto, sans-serif;
+          color: #444;
+        "
+      >
+        <div style="text-align: center">
+          <div class="q-mb-sm">Initializing...</div>
+          <q-spinner color="primary" size="32px" />
+        </div>
+      </div>
+      <div
+        style="
+          padding: 8px;
+          background-color: #fff;
+          border-bottom: 1px solid #ccc;
+          color: #211d1d;
+          flex: 0 0 auto;
+        "
+      >
+        <div class="row items-center q-col-gutter-md">
+          <div class="col-auto">
+            <div class="column">
+              <q-option-group
+                v-model="state.showFields"
+                :options="state.fieldOptions"
+                color="primary"
+                type="radio"
+                inline
+                dense
+              />
+            </div>
+          </div>
+
+          <div class="col-auto">
+            <q-toggle v-model="state.brief" label="Brief" dense />
+          </div>
+
+          <!-- <div class="col-auto">
+            <q-btn-dropdown
+              class="q-ml-md"
+              split
+              :loading="state.generating"
+              @click="onGenerate"
+              label="Generate"
+              outline
+            >
+              <q-list>
+                <q-item clickable v-close-popup @click="onDumpData">
+                  <q-item-section>Dump data</q-item-section>
+                </q-item>
+                <q-item clickable v-close-popup @click="openImportDialog">
+                  <q-item-section>Import data</q-item-section>
+                </q-item>
+              </q-list>
+            </q-btn-dropdown>
+          </div> -->
+
+          <div class="col-auto q-ml-auto">
+            <q-btn outline @click="onReset" title="may be very slow" label="Show All" />
+          </div>
+          <div class="col-auto">
+            <q-btn outline icon="search" label="Search" @click="showDialog()" />
+          </div>
+          <div class="col-auto">
+            <q-btn
+              dense
+              round
+              flat
+              icon="help_outline"
+              aria-label="Help"
+              class="q-mr-md"
+            >
+              <q-tooltip
+                anchor="bottom middle"
+                self="top middle"
+                :offset="[0,8]"
+              >
+                <div
+                  class="column items-start text-left"
+                  style="line-height: 1.4; font-size: 12px"
+                >
+                  <ul>
+                    <li>scroll to zoom in/out</li>
+                    <li>
+                      click node to check highlight related nodes on the chart,
+                      esc to unselect
+                    </li>
+                    <li>
+                      shift + click to see schema's dependencies without
+                      unrelated nodes
+                    </li>
+                    <li>alt + click to see schema details</li>
+                  </ul>
+                </div>
+              </q-tooltip>
+            </q-btn>
+          </div>
+        </div>
+      </div>
+      <div class="row no-wrap" style="flex: 1 1 auto; min-height: 0">
+        <div
+          class="column no-wrap"
+          :style="{
+            minWidth: '300px',
+            width: '300px',
+            borderRight: '1px solid #e0e0e0',
+            backgroundColor: '#fff',
+            minHeight: 0,
+          }"
+        >
+          <q-scroll-area class="fit">
+            <q-list dense separator>
+              <q-expansion-item
+                v-for="tag in state.rawTags"
+                :key="tag.name"
+                expand-separator
+                switch-toggle-side
+                :model-value="state.tag === tag.name"
+                @update:model-value="(val) => toggleTag(tag.name, val)"
+                :header-class="state.tag === tag.name ? 'bg-primary text-white text-weight-medium' : 'text-weight-medium'"
+                content-class="q-pa-none"
+              >
+                <template #header>
+                  <div class="row items-center no-wrap" style="width: 100%">
+                    <div class="col text-body2">{{ tag.name }}</div>
+                  </div>
+                </template>
+
+                <q-list separator>
+                  <q-item
+                    v-for="route in (tag.routes || [])"
+                    :key="route.id"
+                    clickable
+                    v-ripple
+                    :active="state.routeId === route.id"
+                    active-class=""
+                    @click="selectRoute(route.id)"
+                  >
+                    <q-item-section>{{ route.name }}</q-item-section>
+                  </q-item>
+                  <q-item v-if="!tag.routes || tag.routes.length === 0" dense>
+                    <q-item-section class="text-grey-6">No routes</q-item-section>
+                  </q-item>
+                </q-list>
+              </q-expansion-item>
+            </q-list>
+          </q-scroll-area>
+        </div>
+        <div id="graph"></div>
+      </div>
+
+      <!-- Detail Dialog -->
+      <q-dialog v-model="showDetail" :persistent="true" :maximized="true">
+        <detail-dialog
+          :schema-name="schemaName"
+          :show-fields="state.showFields"
+          :model-value="showDetail"
+          @close="closeDetail"
+        />
+      </q-dialog>
+
+      <!-- Schema Field Filter Dialog -->
+      <q-dialog
+        v-model="showSchemaFieldFilter"
+        :persistent="true"
+        :maximized="true"
+      >
+        <schema-field-filter
+          :schemas="state.rawSchemasFull"
+          :schema-name="schemaFieldFilterSchema"
+          @close="showSchemaFieldFilter = false"
+        />
+      </q-dialog>
+
+      <!-- Schema Source Code Dialog (Ctrl + Click) -->
+      <q-dialog
+        v-model="showSchemaCode"
+        :maximized="true"
+        :persistent="false"
+        position="left"
+        :seamless="false"
+      >
+        <schema-code-display
+          :schema-name="schemaCodeName"
+          :model-value="showSchemaCode"
+          :schemas="state.rawSchemasFull"
+          @close="showSchemaCode = false"
+        />
+      </q-dialog>
+
+      <!-- Route Source Code Dialog (Alt + Click on route) -->
+      <q-dialog
+        v-model="showRouteCode"
+        :maximized="true"
+        :persistent="false"
+        position="right"
+        :seamless="false"
+      >
+        <route-code-display
+          :route-id="routeCodeId"
+          :model-value="showRouteCode"
+          :routes="state.routeItems"
+          @close="showRouteCode = false"
+        />
+      </q-dialog>
+
+      <!-- Dump Core Data Dialog -->
+      <q-dialog v-model="showDumpDialog" :maximized="true" :persistent="false">
+        <div style="height: 100%; position: relative; background: #fff">
+          <q-btn
+            flat
+            dense
+            round
+            icon="content_copy"
+            aria-label="Copy"
+            @click="copyDumpJson"
+            style="
+              position: absolute;
+              top: 6px;
+              right: 62px;
+              z-index: 11;
+              background: rgba(255, 255, 255, 0.85);
+            "
+          ></q-btn>
+          <q-btn
+            flat
+            dense
+            round
+            icon="close"
+            aria-label="Close"
+            @click="showDumpDialog = false"
+            style="
+              position: absolute;
+              top: 6px;
+              right: 6px;
+              z-index: 11;
+              background: rgba(255, 255, 255, 0.85);
+            "
+          ></q-btn>
+          <div>
+            <pre
+              style="padding: 20px; overflow: auto"
+            ><code>{{ dumpJson }}</code></pre>
+          </div>
+        </div>
+      </q-dialog>
+
+      <!-- Import Core Data Dialog -->
+      <q-dialog v-model="showImportDialog" :persistent="true">
+        <q-card style="min-width: 70vw; max-width: 90vw">
+          <q-card-section class="text-h6">Import core data JSON</q-card-section>
+          <q-card-section>
+            <q-btn color="primary" label="Render" @click="onImportConfirm" />
+          </q-card-section>
+          <q-card-section>
+            <q-input
+              v-model="importJsonText"
+              type="textarea"
+              autogrow
+              filled
+              label="Paste JSON here"
+            />
+          </q-card-section>
+        </q-card>
+      </q-dialog>
+
+      <!-- Render Graph Dialog (from imported core data) -->
+      <q-dialog v-model="showRenderGraph" :maximized="true" :persistent="false">
+        <render-graph
+          :core-data="renderCoreData"
+          @close="showRenderGraph = false"
+        />
+      </q-dialog>
+    </div>
+
+    <script
+      type="text/javascript"
+      src="https://code.jquery.com/jquery-2.1.3.min.js"
+    ></script>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"
+      integrity="sha512-vc58qvvBdrDR4etbxMdlTt4GBQk1qjvyORR2nrsPsFPyrs+/u5c3+1Ct6upOgdZoIl7eq6k3a1UPDSNAQi/32A=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    ></script>
+    <script src="https://unpkg.com/@hpcc-js/wasm@2.20.0/dist/graphviz.umd.js"></script>
+    <script src="https://unpkg.com/d3-graphviz@5.6.0/build/d3-graphviz.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.min.js"></script>
+
+    <!-- Add the following at the end of your body tag -->
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.5.22/vue.global.prod.min.js"
+      integrity="sha512-Y9sKU0AwzWRxKSLd2i35LuDpUdHY/E9tJrKG0mxw0qYQ75VVgGYazIUQPwKhFK9vGO3jIgAtxLiSq8GQ7PDfUg=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    ></script>
+    <script src="fastapi-voyager-static/quasar.min.js"></script>
+    <script src="fastapi-voyager-static/graphviz.svg.js"></script>
+    <!-- highlight.js minimal ES module load (python only) -->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css"
+    />
+    <script type="module">
+      import hljs from "https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/es/highlight.min.js";
+      import python from "https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/es/languages/python.min.js";
+      hljs.registerLanguage("python", python);
+      window.hljs = hljs;
+    </script>
+    <script type="module" src="fastapi-voyager-static/vue-main.js"></script>
+  </body>
+</html>

{fastapi_voyager-0.7.2 → fastapi_voyager-0.7.4}/src/fastapi_voyager/web/vue-main.js

@@ -51,6 +51,8 @@ const app = createApp({
       showDetail.value = false;
     }
 
+    const skipNextRouteGenerate = ref(false);
+
     function applyRoutesForTag(tagName) {
       const tag = state.rawTags.find((t) => t.name === tagName);
       state.routeOptions = [];
@@ -59,6 +61,7 @@ const app = createApp({
           ...tag.routes.map((r) => ({ label: r.name, value: r.id }))
         );
       }
+      skipNextRouteGenerate.value = true;
       state.routeId = "";
     }
 
@@ -242,7 +245,19 @@ const app = createApp({
       state.schemaFullname = null;
       state.showFields = "object";
       state.brief = false;
-      await loadInitial();
+      onGenerate()
+      // await loadInitial();
+    }
+
+    function toggleTag(tagName, expanded = null) {
+      if (expanded === true) {
+        state.tag = tagName;
+        return;
+      }
+    }
+
+    function selectRoute(routeId) {
+      state.routeId = state.routeId === routeId ? "" : routeId;
     }
 
     // react to tag changes to rebuild routes
@@ -250,6 +265,40 @@ const app = createApp({
       () => state.tag,
       (val) => {
         applyRoutesForTag(val);
+        if (!state.initializing) {
+          onGenerate();
+        }
+      }
+    );
+
+    watch(
+      () => state.routeId,
+      () => {
+        if (skipNextRouteGenerate.value) {
+          skipNextRouteGenerate.value = false;
+          return;
+        }
+        if (!state.initializing) {
+          onGenerate();
+        }
+      }
+    );
+
+    watch(
+      () => state.showFields,
+      () => {
+        if (!state.initializing) {
+          onGenerate();
+        }
+      }
+    )
+
+    watch(
+      () => state.brief,
+      () => {
+        if (!state.initializing) {
+          onGenerate();
+        }
       }
     );
 
@@ -259,6 +308,8 @@ const app = createApp({
 
     return {
       state,
+      toggleTag,
+      selectRoute,
       onFilterTags,
       onFilterSchemas,
       onGenerate,

fastapi_voyager-0.7.2/src/fastapi_voyager/web/index.html

@@ -1,288 +0,0 @@
-<html>
-  <head>
-    <title>FastAPI Voyager</title>
-    <meta name="theme-color" content="#ffffff" />
-    <link rel="stylesheet" href="fastapi-voyager-static/graphviz.svg.css" />
-    <link rel="stylesheet" href="fastapi-voyager-static/quasar.min.css" />
-    <!-- App Icons / Favicons -->
-    <link rel="apple-touch-icon" sizes="180x180" href="fastapi-voyager-static/icon/apple-touch-icon.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="fastapi-voyager-static/icon/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="fastapi-voyager-static/icon/favicon-16x16.png" />
-    <link rel="icon" href="fastapi-voyager-static/icon/favicon.ico" sizes="any" />
-    <link rel="manifest" href="fastapi-voyager-static/icon/site.webmanifest" />
-    <link
-      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
-      rel="stylesheet"
-      type="text/css"
-    />
-  </head>
-
-  <style>
-    html,
-    body {
-      height: 100%;
-      margin: 0;
-    }
-    body {
-      display: flex;
-      flex-direction: column;
-    }
-    /* Quasar select menu max-height for scroll */
-    .select-popup {
-      max-height: 400px;
-      overflow-y: auto;
-      overflow-x: hidden;
-    }
-    #graph {
-      flex: 1 1 auto;
-      overflow: auto;
-    }
-  </style>
-  <body>
-    <div id="q-app" class="column" style="height: 100%">
-      <div v-if="state.initializing" style="position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:2000; background:rgba(255,255,255,0.85); font-size:18px; font-family:Roboto, sans-serif; color:#444;">
-        <div style="text-align:center;">
-          <div class="q-mb-sm">Initializing...</div>
-          <q-spinner color="primary" size="32px" />
-        </div>
-      </div>
-      <div
-        style="
-          padding-top: 8px;
-          padding-left: 8px;
-          padding-bottom: 8px;
-          position: absolute;
-          width: 100%;
-          top: 0;
-          background-color: #fff;
-          z-index: 1;
-          border-bottom: 1px solid #ccc;
-          color: #211d1d;
-        "
-      >
-        <div class="row items-center q-col-gutter-md">
-          <div class="col-auto">
-            <q-select
-              v-model="state.tag"
-              :options="state.tagOptions"
-              use-input
-              input-debounce="0"
-              behavior="menu"
-              dense
-              outlined
-              style="min-width: 320px"
-              popup-content-class="select-popup"
-              clearable
-              label="Tags"
-              @filter="onFilterTags"
-            />
-          </div>
-
-          <div class="col-auto">
-            <q-select
-              v-model="state.routeId"
-              :options="state.routeOptions"
-              option-label="label"
-              option-value="value"
-              emit-value
-              map-options
-              dense
-              outlined
-              style="min-width: 320px"
-              popup-content-class="select-popup"
-              clearable
-              placeholder="All routes"
-              label="Routes"
-            />
-          </div>
-
-          <div class="col-auto">
-            <div class="column">
-              <q-option-group
-                v-model="state.showFields"
-                :options="state.fieldOptions"
-                color="primary"
-                type="radio"
-                inline
-                dense
-              />
-            </div>
-          </div>
-
-          <div class="col-auto">
-            <q-checkbox
-              v-model="state.brief"
-              label="Brief"
-              dense
-            />
-          </div>
-          
-          <div class="col-auto">
-            <q-btn-dropdown
-              class="q-ml-md"
-              split
-              :loading="state.generating"
-              @click="onGenerate"
-              label="Generate"
-              outline
-            >
-              <q-list>
-                <q-item clickable v-close-popup @click="onDumpData">
-                  <q-item-section>Dump data</q-item-section>
-                </q-item>
-                <q-item clickable v-close-popup @click="openImportDialog">
-                  <q-item-section>Import data</q-item-section>
-                </q-item>
-              </q-list>
-            </q-btn-dropdown>
-          </div>
-          <div class="col-auto">
-            <q-btn flat @click="onReset" label="Reset" />
-          </div>
-          <div class="col-auto q-ml-auto">
-            <q-btn
-              outline
-              icon="search"
-              label="Search"
-              @click="showDialog()"
-            />
-          </div>
-          <div class="col-auto">
-            <q-btn
-              dense
-              round
-              flat
-              icon="help_outline"
-              aria-label="Help"
-              class="q-mr-md"
-            >
-              <q-tooltip
-                anchor="bottom middle"
-                self="top middle"
-                :offset="[0,8]"
-              >
-                <div
-                  class="column items-start text-left"
-                  style="line-height: 1.4; font-size: 12px"
-                >
-                  <ul>
-                    <li>scroll to zoom in/out</li>
-                    <li>
-                      click node to check highlight related nodes on the chart,
-                      esc to unselect
-                    </li>
-                    <li>
-                      shift + click to see schema's dependencies without
-                      unrelated nodes
-                    </li>
-                    <li>alt + click to see schema details</li>
-                  </ul>
-                </div>
-              </q-tooltip>
-            </q-btn>
-          </div>
-        </div>
-      </div>
-      <!-- Detail Dialog -->
-      <q-dialog v-model="showDetail" :persistent="true" :maximized="true">
-        <detail-dialog
-          :schema-name="schemaName"
-          :show-fields="state.showFields"
-          :model-value="showDetail"
-          @close="closeDetail"
-        />
-      </q-dialog>
-
-      <!-- Schema Field Filter Dialog -->
-      <q-dialog
-        v-model="showSchemaFieldFilter"
-        :persistent="true"
-        :maximized="true"
-      >
-        <schema-field-filter 
-        :schemas="state.rawSchemasFull"
-        :schema-name="schemaFieldFilterSchema" @close="showSchemaFieldFilter = false" />
-      </q-dialog>
-
-      <!-- Schema Source Code Dialog (Ctrl + Click) -->
-      <q-dialog v-model="showSchemaCode" :maximized="true" :persistent="false" position="left" :seamless="false">
-        <schema-code-display 
-          :schema-name="schemaCodeName" 
-          :model-value="showSchemaCode" 
-          :schemas="state.rawSchemasFull"
-          @close="showSchemaCode = false" />
-      </q-dialog>
-
-      <!-- Route Source Code Dialog (Alt + Click on route) -->
-      <q-dialog v-model="showRouteCode" :maximized="true" :persistent="false" position="right" :seamless="false">
-        <route-code-display 
-          :route-id="routeCodeId" 
-          :model-value="showRouteCode" 
-          :routes="state.routeItems"
-          @close="showRouteCode = false" />
-      </q-dialog>
-
-      <!-- Dump Core Data Dialog -->
-      <q-dialog v-model="showDumpDialog" :maximized="true" :persistent="false">
-        <div style="height:100%; position:relative; background:#fff;">
-          <q-btn
-            flat dense round icon="content_copy"
-            aria-label="Copy"
-            @click="copyDumpJson"
-            style="position:absolute; top:6px; right:62px; z-index:11; background:rgba(255,255,255,0.85);"
-          ></q-btn>
-          <q-btn
-            flat dense round icon="close"
-            aria-label="Close"
-            @click="showDumpDialog = false"
-            style="position:absolute; top:6px; right:6px; z-index:11; background:rgba(255,255,255,0.85);"
-          ></q-btn>
-          <div>
-            <pre style="padding:20px; overflow: auto;"><code>{{ dumpJson }}</code></pre>
-          </div>
-        </div>
-      </q-dialog>
-
-      <!-- Import Core Data Dialog -->
-      <q-dialog v-model="showImportDialog" :persistent="true">
-        <q-card style="min-width:70vw; max-width:90vw;">
-          <q-card-section class="text-h6">Import core data JSON</q-card-section>
-          <q-card-section >
-            <q-btn color="primary" label="Render" @click="onImportConfirm" />
-          </q-card-section>
-          <q-card-section>
-            <q-input v-model="importJsonText" type="textarea" autogrow filled label="Paste JSON here" />
-          </q-card-section>
-        </q-card>
-      </q-dialog>
-
-      <!-- Render Graph Dialog (from imported core data) -->
-      <q-dialog v-model="showRenderGraph" :maximized="true" :persistent="false">
-        <render-graph :core-data="renderCoreData" @close="showRenderGraph = false" />
-      </q-dialog>
-
-      <div id="graph" style="width: 100%; flex: 1 1 auto; overflow: auto"></div>
-    </div>
-
-    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js" ></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js" integrity="sha512-vc58qvvBdrDR4etbxMdlTt4GBQk1qjvyORR2nrsPsFPyrs+/u5c3+1Ct6upOgdZoIl7eq6k3a1UPDSNAQi/32A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-    <script src="https://unpkg.com/@hpcc-js/wasm@2.20.0/dist/graphviz.umd.js"></script>
-    <script src="https://unpkg.com/d3-graphviz@5.6.0/build/d3-graphviz.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.min.js"></script>
-
-    <!-- Add the following at the end of your body tag -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.5.22/vue.global.prod.min.js" integrity="sha512-Y9sKU0AwzWRxKSLd2i35LuDpUdHY/E9tJrKG0mxw0qYQ75VVgGYazIUQPwKhFK9vGO3jIgAtxLiSq8GQ7PDfUg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-    <script src="fastapi-voyager-static/quasar.min.js"></script>
-    <script src="fastapi-voyager-static/graphviz.svg.js"></script>
-    <!-- highlight.js minimal ES module load (python only) -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css" />
-    <script type="module">
-      import hljs from 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/es/highlight.min.js';
-      import python from 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/es/languages/python.min.js';
-      hljs.registerLanguage('python', python);
-      window.hljs = hljs;
-    </script>
-    <script type="module" src="fastapi-voyager-static/vue-main.js"></script>
-  </body>
-</html>