fastapi-voyager 0.9.1__tar.gz → 0.9.2__tar.gz

{fastapi_voyager-0.9.1 → fastapi_voyager-0.9.2}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: fastapi-voyager
-Version: 0.9.1
+Version: 0.9.2
 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
@@ -28,17 +28,12 @@ Description-Content-Type: text/markdown
 [![pypi](https://img.shields.io/pypi/v/fastapi-voyager.svg)](https://pypi.python.org/pypi/fastapi-voyager)
 ![Python Versions](https://img.shields.io/pypi/pyversions/fastapi-voyager)
 
-<p align="center"><img src="./voyager.jpg" alt="" /></p>
-
-
-[![IMAGE ALT TEXT](http://img.youtube.com/vi/PGlbQq1M-n8/0.jpg)](https://www.youtube.com/watch?v=PGlbQq1M-n8 "FastAPI Voyager")
-
+> This repo is still in early stage, it supports pydantic v2 only
 
-> This repo is still in early stage, currently it supports pydantic v2 only, previous name: fastapi-router-viz
+Inspect your API interactively!
 
-Inspect your API interactively
-
-<img width="1480" height="648" alt="image" src="https://github.com/user-attachments/assets/a6ccc9f1-cf06-493a-b99b-eb07767564bd" />
+<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>
 
 ## Installation
 
@@ -52,11 +47,6 @@ uv add fastapi-voyager
 voyager -m path.to.your.app.module --server
 ```
 
-## Dependencies
-
-- FastAPI
-- [pydantic-resolve](https://github.com/allmonday/pydantic-resolve)
-
 
 ## Feature
 
@@ -79,9 +69,9 @@ voyager -m tests.demo
 ```
 
 ### generate the graph
-after initialization, pick tag, rotue (optional) and click `generate`.
+after initialization, pick tag, rotue to render graph
 
-<img width="1919" height="898" alt="image" style="border: 1px solid #aaa" src="https://github.com/user-attachments/assets/05e321d0-49f3-4af6-a7c7-f4c9c6b1dbfd" />
+<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.
@@ -89,9 +79,9 @@ click a node to highlight it's upperstream and downstream nodes. figure out the
 <img width="1485" height="616" alt="image" style="border: 1px solid #aaa" src="https://github.com/user-attachments/assets/70c4095f-86c7-45da-a6f0-fd41ac645813" />
 
 ### filter related nodes
-`shift` click a node to check related node, pick a field to narrow the result.
+`shift` click a node to check related node, pick a field to narrow the result, picked node is marked as red.
 
-<img width="1917" height="800" alt="image" style="border: 1px solid #aaa" src="https://github.com/user-attachments/assets/e770dc70-f293-49e1-bcd7-d8dffa15d9ea" />
+<img width="1423" height="552" alt="image" src="https://github.com/user-attachments/assets/468a058d-afa1-4601-a7c5-c6aad6a8a557" />
 
 ### view source code
 `alt` click a node to show source code or open file in vscode.
@@ -168,7 +158,25 @@ or you can open router_viz.dot with vscode extension `graphviz interactive previ
 
 ## Plan before v1.0
 
-### features:
+
+### backlog
+- [ ] user can generate nodes/edges manually and connect to generated ones
+    - [ ] add owner
+    - [ ] add extra info for schema
+- [ ] fixed left/right bar show field information
+- [ ] display standard ER diagram `hard`
+    - [ ] display potential invalid links
+- [ ] support dataclass (pending)
+
+### in analysis
+- [ ] click field to highlight links
+- [ ] animation effect for edges
+- [ ] customrized right click panel
+    - [ ] show own dependencies
+- [ ] clean up fe code
+
+### plan:
+#### <0.9:
 - [x] group schemas by module hierarchy
 - [x] module-based coloring via Analytics(module_color={...})
 - [x] view in web browser
@@ -196,26 +204,6 @@ or you can open router_viz.dot with vscode extension `graphviz interactive previ
 - [x] fix duplicated link from class and parent class, it also break clicking highlight
 - [x] refactor: abstract render module
 
-### backlog
-- [ ] user can generate nodes/edges manually and connect to generated ones
-    - [ ] add owner
-    - [ ] add extra info for schema
-- [ ] fixed left/right bar show field information
-- [ ] display standard ER diagram `hard`
-    - [ ] display potential invalid links
-
-bugs & non feature:
-- [ ] add tests
-- [ ] support dataclass (pending)
-
-### in analysis
-- [ ] click field to highlight links
-- [ ] animation effect for edges
-- [ ] customrized right click panel
-    - [ ] show own dependencies
-
-### plan:
-
 #### 0.9
 - [x] refactor: server.py
     - [x] rename create_app_with_fastapi -> create_voyager
@@ -225,13 +213,24 @@ bugs & non feature:
     - [x] adjust fe
 
 #### 0.10
-- [ ] logging information
-- [ ] open route in swagger
+- [ ] support opening route in swagger
     - config docs path
 - [ ] add http method for route
 - [ ] enable/disable module cluster  (may save space)
+- [ ] logging information
+- [ ] add tests
+- [ ] hide brief mode if not configured
+- [ ] optimize static resource
+- [ ] show route count in tag expansion item
+- [ ] route list show have a max height to trigger scrollable
+- [ ] fix layout issue when rendering huge graph
 
 #### 0.11
+- [ ] improve user experience
+    - double click to show detail
+    - improve search dialog
+
+#### 0.12
 - [ ] integration with pydantic-resolve
     - [ ] show hint for resolve, post fields
     - [ ] display loader as edges
@@ -247,13 +246,23 @@ pydantic-resolve's @ensure_subset decorator is helpful to pick fields from `sour
 
 ## Credits
 
-- https://apis.guru/graphql-voyager/, for inspiration.
-- https://github.com/tintinweb/vscode-interactive-graphviz, for web visualization.
+- https://apis.guru/graphql-voyager/, thanks for inspiration.
+- https://github.com/tintinweb/vscode-interactive-graphviz, thanks for web visualization.
+
+
+## Dependencies
+
+- FastAPI
+- [pydantic-resolve](https://github.com/allmonday/pydantic-resolve)
+- Quasar
 
 
 ## Changelog
 
 - 0.9:
+    - 0.9.2:
+        - fix: missing fields in schema detail panel
+        - optimization: clean up fe codes.
     - 0.9.1:
         - api change: from `create_app_with_fastapi` to `create_voyager`, and expose as `from fastapi_voyager import create_voyager`
         - optimization: lazy load vscode link and source code, speed up the initialization.

{fastapi_voyager-0.9.1 → fastapi_voyager-0.9.2}/README.md

@@ -1,17 +1,12 @@
 [![pypi](https://img.shields.io/pypi/v/fastapi-voyager.svg)](https://pypi.python.org/pypi/fastapi-voyager)
 ![Python Versions](https://img.shields.io/pypi/pyversions/fastapi-voyager)
 
-<p align="center"><img src="./voyager.jpg" alt="" /></p>
-
-
-[![IMAGE ALT TEXT](http://img.youtube.com/vi/PGlbQq1M-n8/0.jpg)](https://www.youtube.com/watch?v=PGlbQq1M-n8 "FastAPI Voyager")
-
+> This repo is still in early stage, it supports pydantic v2 only
 
-> This repo is still in early stage, currently it supports pydantic v2 only, previous name: fastapi-router-viz
+Inspect your API interactively!
 
-Inspect your API interactively
-
-<img width="1480" height="648" alt="image" src="https://github.com/user-attachments/assets/a6ccc9f1-cf06-493a-b99b-eb07767564bd" />
+<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>
 
 ## Installation
 
@@ -25,11 +20,6 @@ uv add fastapi-voyager
 voyager -m path.to.your.app.module --server
 ```
 
-## Dependencies
-
-- FastAPI
-- [pydantic-resolve](https://github.com/allmonday/pydantic-resolve)
-
 
 ## Feature
 
@@ -52,9 +42,9 @@ voyager -m tests.demo
 ```
 
 ### generate the graph
-after initialization, pick tag, rotue (optional) and click `generate`.
+after initialization, pick tag, rotue to render graph
 
-<img width="1919" height="898" alt="image" style="border: 1px solid #aaa" src="https://github.com/user-attachments/assets/05e321d0-49f3-4af6-a7c7-f4c9c6b1dbfd" />
+<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.
@@ -62,9 +52,9 @@ click a node to highlight it's upperstream and downstream nodes. figure out the
 <img width="1485" height="616" alt="image" style="border: 1px solid #aaa" src="https://github.com/user-attachments/assets/70c4095f-86c7-45da-a6f0-fd41ac645813" />
 
 ### filter related nodes
-`shift` click a node to check related node, pick a field to narrow the result.
+`shift` click a node to check related node, pick a field to narrow the result, picked node is marked as red.
 
-<img width="1917" height="800" alt="image" style="border: 1px solid #aaa" src="https://github.com/user-attachments/assets/e770dc70-f293-49e1-bcd7-d8dffa15d9ea" />
+<img width="1423" height="552" alt="image" src="https://github.com/user-attachments/assets/468a058d-afa1-4601-a7c5-c6aad6a8a557" />
 
 ### view source code
 `alt` click a node to show source code or open file in vscode.
@@ -141,7 +131,25 @@ or you can open router_viz.dot with vscode extension `graphviz interactive previ
 
 ## Plan before v1.0
 
-### features:
+
+### backlog
+- [ ] user can generate nodes/edges manually and connect to generated ones
+    - [ ] add owner
+    - [ ] add extra info for schema
+- [ ] fixed left/right bar show field information
+- [ ] display standard ER diagram `hard`
+    - [ ] display potential invalid links
+- [ ] support dataclass (pending)
+
+### in analysis
+- [ ] click field to highlight links
+- [ ] animation effect for edges
+- [ ] customrized right click panel
+    - [ ] show own dependencies
+- [ ] clean up fe code
+
+### plan:
+#### <0.9:
 - [x] group schemas by module hierarchy
 - [x] module-based coloring via Analytics(module_color={...})
 - [x] view in web browser
@@ -169,26 +177,6 @@ or you can open router_viz.dot with vscode extension `graphviz interactive previ
 - [x] fix duplicated link from class and parent class, it also break clicking highlight
 - [x] refactor: abstract render module
 
-### backlog
-- [ ] user can generate nodes/edges manually and connect to generated ones
-    - [ ] add owner
-    - [ ] add extra info for schema
-- [ ] fixed left/right bar show field information
-- [ ] display standard ER diagram `hard`
-    - [ ] display potential invalid links
-
-bugs & non feature:
-- [ ] add tests
-- [ ] support dataclass (pending)
-
-### in analysis
-- [ ] click field to highlight links
-- [ ] animation effect for edges
-- [ ] customrized right click panel
-    - [ ] show own dependencies
-
-### plan:
-
 #### 0.9
 - [x] refactor: server.py
     - [x] rename create_app_with_fastapi -> create_voyager
@@ -198,13 +186,24 @@ bugs & non feature:
     - [x] adjust fe
 
 #### 0.10
-- [ ] logging information
-- [ ] open route in swagger
+- [ ] support opening route in swagger
     - config docs path
 - [ ] add http method for route
 - [ ] enable/disable module cluster  (may save space)
+- [ ] logging information
+- [ ] add tests
+- [ ] hide brief mode if not configured
+- [ ] optimize static resource
+- [ ] show route count in tag expansion item
+- [ ] route list show have a max height to trigger scrollable
+- [ ] fix layout issue when rendering huge graph
 
 #### 0.11
+- [ ] improve user experience
+    - double click to show detail
+    - improve search dialog
+
+#### 0.12
 - [ ] integration with pydantic-resolve
     - [ ] show hint for resolve, post fields
     - [ ] display loader as edges
@@ -220,13 +219,23 @@ pydantic-resolve's @ensure_subset decorator is helpful to pick fields from `sour
 
 ## Credits
 
-- https://apis.guru/graphql-voyager/, for inspiration.
-- https://github.com/tintinweb/vscode-interactive-graphviz, for web visualization.
+- https://apis.guru/graphql-voyager/, thanks for inspiration.
+- https://github.com/tintinweb/vscode-interactive-graphviz, thanks for web visualization.
+
+
+## Dependencies
+
+- FastAPI
+- [pydantic-resolve](https://github.com/allmonday/pydantic-resolve)
+- Quasar
 
 
 ## Changelog
 
 - 0.9:
+    - 0.9.2:
+        - fix: missing fields in schema detail panel
+        - optimization: clean up fe codes.
     - 0.9.1:
         - api change: from `create_app_with_fastapi` to `create_voyager`, and expose as `from fastapi_voyager import create_voyager`
         - optimization: lazy load vscode link and source code, speed up the initialization.

{fastapi_voyager-0.9.1 → fastapi_voyager-0.9.2}/src/fastapi_voyager/version.py

@@ -1,2 +1,2 @@
 __all__ = ["__version__"]
-__version__ = "0.9.1"
+__version__ = "0.9.2"

{fastapi_voyager-0.9.1 → fastapi_voyager-0.9.2}/src/fastapi_voyager/web/component/route-code-display.js

@@ -4,13 +4,11 @@ const { defineComponent, ref, watch, onMounted } = window.Vue;
 // Props:
 //   routeId: route id key in routeItems
 //   modelValue: dialog visibility
-//   routes: object map { id: { id, name, source_code } }
 export default defineComponent({
   name: "RouteCodeDisplay",
   props: {
     routeId: { type: String, required: true },
     modelValue: { type: Boolean, default: false },
-    routes: { type: Object, default: () => ({}) },
   },
   emits: ["close"],
   setup(props, { emit }) {

{fastapi_voyager-0.9.1 → fastapi_voyager-0.9.2}/src/fastapi_voyager/web/component/schema-code-display.js

@@ -14,7 +14,7 @@ export default defineComponent({
   props: {
     schemaName: { type: String, required: true },
     modelValue: { type: Boolean, default: false },
-    schemas: { type: Array, default: () => [] },
+    schemas: { type: Object, default: () => ({}) },
   },
   emits: ["close"],
   setup(props, { emit }) {
@@ -102,6 +102,8 @@ export default defineComponent({
         loading.value = false;
       }
 
+      fields.value = props.schemas[props.schemaName].fields || []
+
       if (!error.value && tab.value === "source") {
         highlightLater();
       }

{fastapi_voyager-0.9.1 → fastapi_voyager-0.9.2}/src/fastapi_voyager/web/component/schema-field-filter.js

@@ -14,7 +14,8 @@ export default defineComponent({
   name: "SchemaFieldFilter",
   props: {
     schemaName: { type: String, default: null }, // external injection triggers auto-query
-    schemas: { type: Array, default: () => [] }, // externally provided schemas (state.rawSchemasFull or similar)
+    // externally provided schemas dict (state.rawSchemasFull): { [id]: schema }
+    schemas: { type: Object, default: () => ({}) },
   },
   emits: ["queried", "close"],
   setup(props, { emit }) {
@@ -39,9 +40,11 @@ export default defineComponent({
     let lastAppliedExternal = null;
 
     async function loadSchemas() {
-      // Refactored: use externally provided props.schemas directly; no network call.
+      // Use externally provided props.schemas dict directly; no network call.
       state.error = null;
-      state.schemas = Array.isArray(props.schemas) ? props.schemas : [];
+      const dict = props.schemas && typeof props.schemas === "object" ? props.schemas : {};
+      // Flatten to array for local operations
+      state.schemas = Object.values(dict);
       state.schemaOptions = state.schemas.map((s) => ({
         label: `${s.name} (${s.id})`,
         value: s.id,

{fastapi_voyager-0.9.1 → fastapi_voyager-0.9.2}/src/fastapi_voyager/web/index.html

@@ -197,7 +197,7 @@
           </div>
         </div>
       </div>
-      <div style="flex: 1 1 auto; min-height: 0;">
+      <div style="flex: 1 1 auto; min-height: 10px;">
         <q-splitter
           v-model="state.splitter"
           unit="px"
@@ -323,7 +323,6 @@
         <route-code-display
           :route-id="routeCodeId"
           :model-value="showRouteCode"
-          :routes="state.routeItems"
           @close="showRouteCode = false"
         />
       </q-dialog>

{fastapi_voyager-0.9.1 → fastapi_voyager-0.9.2}/src/fastapi_voyager/web/vue-main.js

@@ -9,13 +9,9 @@ const app = createApp({
   setup() {
     const state = reactive({
       // options and selections
-      tag: null,
-      tagOptions: [], // array of strings
-      routeId: null,
-      routeOptions: [], // [{ label, value }]
-      schemaId: null,
-      schemaOptions: [], // [{ label, value }]
-      routeItems: {}, // { id: { label, value } }
+      tag: null, // picked tag
+      routeId: null, // picked route
+      schemaId: null, // picked schema
       showFields: "object",
       fieldOptions: [
         { label: "No fields", value: "single" },
@@ -26,17 +22,17 @@ const app = createApp({
       hidePrimitiveRoute: false,
       generating: false,
       rawTags: [], // [{ name, routes: [{ id, name }] }]
-      rawSchemas: [], // [{ name, id }]
-      rawSchemasFull: [], // full objects with source_code & fields
+      rawSchemas: new Set(), // [{ name, id }]
+      rawSchemasFull: {}, // full schemas dict: { [schema.id]: schema }
       initializing: true,
       // Splitter size (left panel width in px)
       splitter: 300,
     });
+
     const showDetail = ref(false);
     const showSchemaFieldFilter = ref(false);
     const showSchemaCode = ref(false);
     const showRouteCode = ref(false);
-    // Dump/Import dialogs and rendered graph dialog
     const showDumpDialog = ref(false);
     const dumpJson = ref("");
     const showImportDialog = ref(false);
@@ -55,47 +51,18 @@ const app = createApp({
       showDetail.value = false;
     }
 
-    function onFilterTags(val, update) {
-      const normalized = (val || "").toLowerCase();
-      update(() => {
-        if (!normalized) {
-          state.tagOptions = state.rawTags.map((t) => t.name);
-          return;
-        }
-        state.tagOptions = state.rawTags
-          .map((t) => t.name)
-          .filter((n) => n.toLowerCase().includes(normalized));
-      });
-    }
-
-    function onFilterSchemas(val, update) {
-      const normalized = (val || "").toLowerCase();
-      update(() => {
-        const makeLabel = (s) => `${s.name} (${s.id})`;
-        let list = state.rawSchemas.map((s) => ({
-          label: makeLabel(s),
-          value: s.id,
-        }));
-        if (normalized) {
-          list = list.filter((opt) =>
-            opt.label.toLowerCase().includes(normalized)
-          );
-        }
-        state.schemaOptions = list;
-      });
-    }
-
     async function loadInitial() {
       state.initializing = true;
       try {
         const res = await fetch("dot");
         const data = await res.json();
         state.rawTags = Array.isArray(data.tags) ? data.tags : [];
-        state.rawSchemasFull = Array.isArray(data.schemas) ? data.schemas : [];
-        state.rawSchemas = state.rawSchemasFull.map((s) => ({
-          name: s.name,
-          id: s.id,
-        }));
+        const schemasArr = Array.isArray(data.schemas) ? data.schemas : [];
+        // Build dict keyed by id for faster lookups and simpler prop passing
+        state.rawSchemasFull = Object.fromEntries(
+          schemasArr.map((s) => [s.id, s])
+        );
+        state.rawSchemas = new Set(Object.keys(state.rawSchemasFull));
         state.routeItems = data.tags
           .map((t) => t.routes)
           .flat()
@@ -104,13 +71,7 @@ const app = createApp({
             return acc;
           }, {});
 
-        state.tagOptions = state.rawTags.map((t) => t.name);
-        state.schemaOptions = state.rawSchemas.map((s) => ({
-          label: `${s.name} (${s.id})`,
-          value: s.id,
-        }));
         // default route options placeholder
-        state.routeOptions = [];
       } catch (e) {
         console.error("Initial load failed", e);
       } finally {
@@ -140,14 +101,13 @@ const app = createApp({
         // create graph instance once
         const graphUI = new GraphUI("#graph", {
           onSchemaClick: (id) => {
-            if (state.rawSchemas.find((s) => s.id === id)) {
+            if (state.rawSchemas.has(id)) {
               schemaFieldFilterSchema.value = id;
               showSchemaFieldFilter.value = true;
             }
           },
           onSchemaAltClick: (id) => {
-            // priority: schema id; else route id
-            if (state.rawSchemas.find((s) => s.id === id)) {
+            if (state.rawSchemas.has(id)) {
               schemaCodeName.value = id;
               showSchemaCode.value = true;
               return;
@@ -282,8 +242,6 @@ const app = createApp({
       toggleBrief,
       toggleHidePrimitiveRoute,
       selectRoute,
-      onFilterTags,
-      onFilterSchemas,
       onGenerate,
       onReset,
       showDetail,