fastapi-voyager 0.11.4__tar.gz → 0.11.6__tar.gz

{fastapi_voyager-0.11.4 → fastapi_voyager-0.11.6}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: fastapi-voyager
-Version: 0.11.4
+Version: 0.11.6
 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
@@ -45,8 +45,7 @@ interactively !!
 
 [visit online demo](https://www.newsyeah.fun/voyager/) of project: [composition oriented development pattern](https://github.com/allmonday/composition-oriented-development-pattern)
 
-<p align="center"><img src="./voyager.jpg" alt="" /></p>
-<p align="center"><a target="_blank" rel="" href="https://www.youtube.com/watch?v=PGlbQq1M-n8"><img src="http://img.youtube.com/vi/PGlbQq1M-n8/0.jpg" alt="" style="max-width: 100%;"></a></p>
+<img width="1600" height="986" alt="image" src="https://github.com/user-attachments/assets/8829cda0-f42d-4c84-be2f-b019bb5fe7e1" />
 
 ## Installation
 
@@ -97,32 +96,25 @@ voyager -m tests.demo
            --module_color=tests.demo:tomato
 ```
 
-### generate the graph
-after initialization, pick tag, rotue to render graph
-
-<img width="1628" height="765" alt="image" src="https://github.com/user-attachments/assets/b4712f82-e754-453b-aa69-24c932b8f48f" />
-
 ### highlight
 click a node to highlight it's upperstream and downstream nodes. figure out the related models of one page, or homw many pages are related with one model.
 
-<img width="1485" height="616" alt="image" style="border: 1px solid #aaa" src="https://github.com/user-attachments/assets/70c4095f-86c7-45da-a6f0-fd41ac645813" />
+<img width="1100" height="700" alt="image" src="https://github.com/user-attachments/assets/3e0369ea-5fa4-469a-82c1-ed57d407e53d" />
 
-### filter related nodes
-`shift` click a node to check related node, pick a field to narrow the result, picked node is marked as red.
+### focus on nodes
+toggle focus to hide nodes not related with current picked one.
 
-<img width="1423" height="552" alt="image" src="https://github.com/user-attachments/assets/468a058d-afa1-4601-a7c5-c6aad6a8a557" />
+before: 
+<img width="1066" height="941" alt="image" src="https://github.com/user-attachments/assets/39f30817-899a-4289-93f4-a1646d3441c1" />
+after:
+<img width="1061" height="937" alt="image" src="https://github.com/user-attachments/assets/79709b02-7571-43fc-abc9-17a287a97515" />
 
 ### view source code
-`alt` click a node to show source code or open file in vscode.
-
-<img width="1049" height="694" alt="image" src="https://github.com/user-attachments/assets/7839ac83-8d60-44ad-b1c9-9652a76339b1" />
-
-<img width="1042" height="675" alt="image" src="https://github.com/user-attachments/assets/38ae705f-5982-4a02-9c3f-038b1d00bcf6" />
-
-`alt` click a route to show source code or open file in vscode
-
-<img width="882" height="445" alt="image" src="https://github.com/user-attachments/assets/158560ef-63ca-4991-9b7d-587be4fa04e4" />
+double click a node to show source code or open file in vscode.
+<img width="1297" height="940" alt="image" src="https://github.com/user-attachments/assets/c8bb2e7d-b727-42a6-8c9e-64dce297d2d8" />
 
+double click a route to show source code or open file in vscode
+<img width="1132" height="824" alt="image" src="https://github.com/user-attachments/assets/b706e879-e4fc-48dd-ace1-99bf97e3ed6a" />
 
 
 
@@ -191,6 +183,9 @@ or you can open router_viz.dot with vscode extension `graphviz interactive previ
 - [ ] animation effect for edges
 - [ ] customrized right click panel
     - [ ] show own dependencies
+- [ ] sort field name
+- [ ] set max limit for fields
+- [ ] logging information
 
 ### plan:
 #### <0.9:
@@ -274,9 +269,11 @@ or you can open router_viz.dot with vscode extension `graphviz interactive previ
 - 0.11.4
     - [x] add loading for field detail panel
 - 0.11.5
-    - [ ] logging information
-    - [ ] sort field name
-    - [ ] set max limit for fields
+    - [x] optimize open in swagger link
+    - [x] change jquery cdn
+- 0.11.6
+    - [x] flag of loading full graph in first render or not
+    - [x] optimize loading static resource 
 
 #### 0.12
 - [ ] add tests

{fastapi_voyager-0.11.4 → fastapi_voyager-0.11.6}/README.md

@@ -16,8 +16,7 @@ interactively !!
 
 [visit online demo](https://www.newsyeah.fun/voyager/) of project: [composition oriented development pattern](https://github.com/allmonday/composition-oriented-development-pattern)
 
-<p align="center"><img src="./voyager.jpg" alt="" /></p>
-<p align="center"><a target="_blank" rel="" href="https://www.youtube.com/watch?v=PGlbQq1M-n8"><img src="http://img.youtube.com/vi/PGlbQq1M-n8/0.jpg" alt="" style="max-width: 100%;"></a></p>
+<img width="1600" height="986" alt="image" src="https://github.com/user-attachments/assets/8829cda0-f42d-4c84-be2f-b019bb5fe7e1" />
 
 ## Installation
 
@@ -68,32 +67,25 @@ voyager -m tests.demo
            --module_color=tests.demo:tomato
 ```
 
-### generate the graph
-after initialization, pick tag, rotue to render graph
-
-<img width="1628" height="765" alt="image" src="https://github.com/user-attachments/assets/b4712f82-e754-453b-aa69-24c932b8f48f" />
-
 ### highlight
 click a node to highlight it's upperstream and downstream nodes. figure out the related models of one page, or homw many pages are related with one model.
 
-<img width="1485" height="616" alt="image" style="border: 1px solid #aaa" src="https://github.com/user-attachments/assets/70c4095f-86c7-45da-a6f0-fd41ac645813" />
+<img width="1100" height="700" alt="image" src="https://github.com/user-attachments/assets/3e0369ea-5fa4-469a-82c1-ed57d407e53d" />
 
-### filter related nodes
-`shift` click a node to check related node, pick a field to narrow the result, picked node is marked as red.
+### focus on nodes
+toggle focus to hide nodes not related with current picked one.
 
-<img width="1423" height="552" alt="image" src="https://github.com/user-attachments/assets/468a058d-afa1-4601-a7c5-c6aad6a8a557" />
+before: 
+<img width="1066" height="941" alt="image" src="https://github.com/user-attachments/assets/39f30817-899a-4289-93f4-a1646d3441c1" />
+after:
+<img width="1061" height="937" alt="image" src="https://github.com/user-attachments/assets/79709b02-7571-43fc-abc9-17a287a97515" />
 
 ### view source code
-`alt` click a node to show source code or open file in vscode.
-
-<img width="1049" height="694" alt="image" src="https://github.com/user-attachments/assets/7839ac83-8d60-44ad-b1c9-9652a76339b1" />
-
-<img width="1042" height="675" alt="image" src="https://github.com/user-attachments/assets/38ae705f-5982-4a02-9c3f-038b1d00bcf6" />
-
-`alt` click a route to show source code or open file in vscode
-
-<img width="882" height="445" alt="image" src="https://github.com/user-attachments/assets/158560ef-63ca-4991-9b7d-587be4fa04e4" />
+double click a node to show source code or open file in vscode.
+<img width="1297" height="940" alt="image" src="https://github.com/user-attachments/assets/c8bb2e7d-b727-42a6-8c9e-64dce297d2d8" />
 
+double click a route to show source code or open file in vscode
+<img width="1132" height="824" alt="image" src="https://github.com/user-attachments/assets/b706e879-e4fc-48dd-ace1-99bf97e3ed6a" />
 
 
 
@@ -162,6 +154,9 @@ or you can open router_viz.dot with vscode extension `graphviz interactive previ
 - [ ] animation effect for edges
 - [ ] customrized right click panel
     - [ ] show own dependencies
+- [ ] sort field name
+- [ ] set max limit for fields
+- [ ] logging information
 
 ### plan:
 #### <0.9:
@@ -245,9 +240,11 @@ or you can open router_viz.dot with vscode extension `graphviz interactive previ
 - 0.11.4
     - [x] add loading for field detail panel
 - 0.11.5
-    - [ ] logging information
-    - [ ] sort field name
-    - [ ] set max limit for fields
+    - [x] optimize open in swagger link
+    - [x] change jquery cdn
+- 0.11.6
+    - [x] flag of loading full graph in first render or not
+    - [x] optimize loading static resource 
 
 #### 0.12
 - [ ] add tests

{fastapi_voyager-0.11.4 → fastapi_voyager-0.11.6}/src/fastapi_voyager/server.py

@@ -1,5 +1,5 @@
 from pathlib import Path
-from typing import Optional
+from typing import Optional, Literal
 from fastapi import FastAPI, APIRouter
 from starlette.middleware.gzip import GZipMiddleware
 from pydantic import BaseModel
@@ -15,6 +15,7 @@ from fastapi_voyager.version import __version__
 WEB_DIR = Path(__file__).parent / "web"
 WEB_DIR.mkdir(exist_ok=True)
 
+INITIAL_PAGE_POLICY = Literal['first', 'full', 'empty']
 
 class OptionParam(BaseModel):
 	tags: list[Tag]
@@ -22,6 +23,7 @@ class OptionParam(BaseModel):
 	dot: str
 	enable_brief_mode: bool
 	version: str
+	initial_page_policy: INITIAL_PAGE_POLICY
 	swagger_url: Optional[str] = None
 
 class Payload(BaseModel):
@@ -42,6 +44,7 @@ def create_route(
 	swagger_url: Optional[str] = None,
 	module_prefix: Optional[str] = None,
 	online_repo_url: Optional[str] = None,
+	initial_page_policy: INITIAL_PAGE_POLICY = 'first',
 ):
 	"""
 	module_color: dict mapping module name to color string, e.g. {'models': 'lightblue'}
@@ -67,7 +70,8 @@ def create_route(
 			dot=dot,
 			enable_brief_mode=bool(module_prefix),
 			version=__version__,
-			swagger_url=swagger_url)
+			swagger_url=swagger_url,
+			initial_page_policy=initial_page_policy)
 
 	@router.post("/dot", response_class=PlainTextResponse)
 	def get_filtered_dot(payload: Payload) -> str:
@@ -213,13 +217,16 @@ def create_voyager(
 	module_prefix: Optional[str] = None,
 	swagger_url: Optional[str] = None,
 	online_repo_url: Optional[str] = None,
+	initial_page_policy: INITIAL_PAGE_POLICY = 'first',
 ) -> FastAPI:
 	router = create_route(
 		target_app, 
 		module_color=module_color, 
 		module_prefix=module_prefix, 
 		swagger_url=swagger_url,
-		online_repo_url=online_repo_url)
+		online_repo_url=online_repo_url,
+		initial_page_policy=initial_page_policy,
+		)
 
 	app = FastAPI(title="fastapi-voyager demo server")
 	if gzip_minimum_size is not None and gzip_minimum_size >= 0:

{fastapi_voyager-0.11.4 → fastapi_voyager-0.11.6}/src/fastapi_voyager/version.py

@@ -1,2 +1,2 @@
 __all__ = ["__version__"]
-__version__ = "0.11.4"
+__version__ = "0.11.6"

{fastapi_voyager-0.11.4 → fastapi_voyager-0.11.6}/src/fastapi_voyager/web/index.html

@@ -59,8 +59,39 @@
     .adjust-fit {
       height: calc(100vh - 54px);
     }
+    /* App boot loading overlay & gating */
+    #app-loading-overlay {
+      position: fixed;
+      inset: 0;
+      display: none;
+      align-items: center;
+      justify-content: center;
+      gap: 12px;
+      background: #ffffff;
+      z-index: 9999;
+      font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+      color: #009485;
+    }
+    .loading-text { font-size: 14px; }
+    .spinner {
+      width: 20px;
+      height: 20px;
+      border: 2px solid rgba(0, 148, 133, 0.2);
+      border-top-color: #009485;
+      border-radius: 50%;
+      animation: frv-spin 0.8s linear infinite;
+    }
+    @keyframes frv-spin { to { transform: rotate(360deg); } }
+    /* While JS not ready: hide app, show overlay */
+    body.app-loading #q-app { visibility: hidden; }
+    body.app-loading #app-loading-overlay { display: flex; }
   </style>
-  <body>
+  <body class="app-loading">
+    <!-- App boot loading overlay: shown until JS initializes -->
+    <div id="app-loading-overlay" aria-busy="true" aria-live="polite">
+      <div class="spinner" aria-hidden="true"></div>
+      <div class="loading-text">Loading…</div>
+    </div>
     <div id="q-app">
       <q-layout view="hHh lpR fff">
         <q-header bordered class="bg-primary text-white">
@@ -75,7 +106,7 @@
             </div>
             <div class="col-auto" style="font-size: 16px">
               <q-option-group
-                style="margin-left: 140px"
+                style="margin-left: 80px"
                 v-model="state.showFields"
                 :options="state.fieldOptions"
                 @update:model-value="(val) => toggleShowField(val)"
@@ -218,9 +249,9 @@
                               class="q-mr-sm"
                               :name="state.tag == tag.name ? 'folder' : 'folder_open'"
                             ></q-icon>
-                            <span>{{ tag.name }} <q-chip style="position:relative; top: -1px;" class="q-ml-sm" dense>{{ tag.routes.length }}</q-chip></span>
-                            <a target="_blank" class="q-ml-sm" v-if="state.swaggerUrl" :href="state.swaggerUrl + '#/' + tag.name">
-                              <q-icon size="small" name="link"></q-icon>
+                            <span>{{ tag.name }} <q-chip style="position:relative; top: -1px;" class="q-ml-md" dense>{{ tag.routes.length }}</q-chip></span>
+                            <a v-if="state._tag == tag.name" target="_blank" class="q-ml-sm" v-if="state.swaggerUrl" :href="state.swaggerUrl + '#/' + tag.name">
+                              <q-icon color="primary" size="" name="link" title="open in swagger"></q-icon>
                             </a>
                         </div>
                       </template>
@@ -241,8 +272,8 @@
                                   name="data_object"
                                 ></q-icon>
                                 {{ route.name }}
-                                <a target="_blank" class="q-ml-sm" v-if="state.swaggerUrl" :href="state.swaggerUrl + '#/' + tag.name + '/' + route.unique_id">
-                                  <q-icon size="small" name="link"></q-icon>
+                                <a v-if="state.routeId == route.id" target="_blank" class="q-ml-md" v-if="state.swaggerUrl" :href="state.swaggerUrl + '#/' + tag.name + '/' + route.unique_id">
+                                  <q-icon color="primary" size="" name="link" title="open in swagger"></q-icon>
                                 </a>
                               </span>
                             </q-item-section>
@@ -410,11 +441,9 @@
         />
       </q-dialog>
     </div>
-
-    <script
-      type="text/javascript"
-      src="https://code.jquery.com/jquery-2.1.3.min.js"
-    ></script>
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <script src="fastapi-voyager-static/quasar.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" integrity="sha512-egJ/Y+22P9NQ9aIyVCh0VCOsfydyn8eNmqBy+y2CnJG+fpRIxXMS6jbWP8tVKp0jp+NO5n8WtMUAnNnGoJKi4w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script
       src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"
       integrity="sha512-vc58qvvBdrDR4etbxMdlTt4GBQk1qjvyORR2nrsPsFPyrs+/u5c3+1Ct6upOgdZoIl7eq6k3a1UPDSNAQi/32A=="
@@ -422,18 +451,9 @@
       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/d3-graphviz/5.6.0/d3-graphviz.min.js" integrity="sha512-Le8HpIpS2Tc7SDHLM6AOgAKq6ZR4uDwLhjPSR20DtXE5dFb9xECHRwgpc1nxxnU0Dv+j6FNMoSddky5gyvI3lQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></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
@@ -441,10 +461,18 @@
       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;
+      window.addEventListener('DOMContentLoaded', async () => {
+        if (!window.hljs) {
+          try {
+            const { default: hljs } = await import('https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/es/highlight.min.js');
+            const { default: python } = await import('https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/es/languages/python.min.js');
+            hljs.registerLanguage("python", python);
+            window.hljs = hljs;
+          } catch (e) {
+            console.warn("Failed to preload highlight.js", e);
+          }
+        }
+      });
     </script>
     <script type="module" src="fastapi-voyager-static/vue-main.js"></script>
   </body>

{fastapi_voyager-0.11.4 → fastapi_voyager-0.11.6}/src/fastapi_voyager/web/vue-main.js

@@ -34,7 +34,7 @@ const app = createApp({
       detailDrawer: false,
       drawerWidth: 300, // drawer 宽度
       version: "", // version from backend
-      showModule: true
+      showModule: true,
     });
 
     const showDetail = ref(false);
@@ -82,6 +82,19 @@ const app = createApp({
         state.version = data.version || "";
         state.swaggerUrl = data.swagger_url || null
 
+        switch (data.initial_page_policy) {
+          case "full":
+            onGenerate()
+            return
+          case "empty":
+            return
+          case "first":
+            state.tag = state.rawTags.length > 0 ? state.rawTags[0].name : null;
+            state._tag = state.tag;
+            onGenerate();
+            return
+        }
+
         // default route options placeholder
       } catch (e) {
         console.error("Initial load failed", e);
@@ -226,6 +239,7 @@ const app = createApp({
 
     async function onReset() {
       state.tag = null;
+      state._tag = null;
       state.routeId = "";
       state.schemaId = null;
       // state.showFields = "object";
@@ -308,7 +322,9 @@ const app = createApp({
     }
 
     onMounted(async () => {
+      document.body.classList.remove("app-loading")
       await loadInitial();
+      // Reveal app content only after initial JS/data is ready
     });
 
     return {

{fastapi_voyager-0.11.4 → fastapi_voyager-0.11.6}/tests/programatic.py

@@ -8,4 +8,5 @@ app.mount(
         module_color={"tests.service": "red"}, 
         module_prefix="tests.service", 
         swagger_url="/docs",
+        initial_page_policy='first',
         online_repo_url="https://github.com/allmonday/fastapi-voyager/blob/main"))