fastapi-voyager 0.8.2__py3-none-any.whl → 0.9.1__py3-none-any.whl

fastapi_voyager/__init__.py

@@ -3,3 +3,7 @@
 Utilities to introspect a FastAPI application and visualize its routing tree.
 """
 from .version import __version__  # noqa: F401
+
+from .server import create_voyager
+
+__all__ = ["__version__", "create_voyager"]

fastapi_voyager/cli.py

@@ -281,7 +281,7 @@ Examples:
             except ImportError:
                 print("Error: uvicorn is required to run the server. Install via 'pip install uvicorn' or 'uv add uvicorn'.")
                 sys.exit(1)
-            app_server = viz_server.create_app_with_fastapi(
+            app_server = viz_server.create_voyager(
                 app,
                 module_color=module_color,
                 module_prefix=args.module_prefix,

fastapi_voyager/server.py

@@ -6,23 +6,18 @@ from pydantic import BaseModel
 from fastapi.responses import HTMLResponse, PlainTextResponse, JSONResponse
 from fastapi.staticfiles import StaticFiles
 from fastapi_voyager.voyager import Voyager
-from fastapi_voyager.type import Tag, FieldInfo, CoreData
+from fastapi_voyager.type import Tag, FieldInfo, CoreData, SchemaNode
 from fastapi_voyager.render import Renderer
+from fastapi_voyager.type_helper import get_source, get_vscode_link
 
 
 WEB_DIR = Path(__file__).parent / "web"
 WEB_DIR.mkdir(exist_ok=True)
 
-class SchemaType(BaseModel):
-	name: str
-	fullname: str
-	source_code: str
-	vscode_link: str
-	fields: list[FieldInfo]
 
 class OptionParam(BaseModel):
 	tags: list[Tag]
-	schemas: list[SchemaType]
+	schemas: list[SchemaNode]
 	dot: str
 
 class Payload(BaseModel):
@@ -40,26 +35,22 @@ def create_route(
 	module_color: dict[str, str] | None = None,
 	module_prefix: Optional[str] = None,
 ):
+	"""
+	module_color: dict mapping module name to color string, e.g. {'models': 'lightblue'}
+	module_prefix: prefix string to define schemas show in brief mode
+	"""
 	router = APIRouter(tags=['fastapi-voyager'])
 
 	@router.get("/dot", response_model=OptionParam)
 	def get_dot() -> str:
-		voyager = Voyager(module_color=module_color, load_meta=True)
+		voyager = Voyager(module_color=module_color)
 		voyager.analysis(target_app)
 		dot = voyager.render_dot()
 
 		# include tags and their routes
 		tags = voyager.tags
 
-		schemas = [
-			SchemaType(
-				name=s.name,
-				fullname=s.id,
-				fields=s.fields,
-				source_code=s.source_code,
-				vscode_link=s.vscode_link
-			) for s in voyager.nodes
-		]
+		schemas = voyager.nodes[:]
 		schemas.sort(key=lambda s: s.name)
 
 		return OptionParam(tags=tags, schemas=schemas, dot=dot)
@@ -74,7 +65,6 @@ def create_route(
 			show_fields=payload.show_fields,
 			module_color=module_color,
 			route_name=payload.route_name,
-			load_meta=False,
 			hide_primitive_route=payload.hide_primitive_route,
 		)
 		voyager.analysis(target_app)
@@ -92,7 +82,6 @@ def create_route(
 			show_fields=payload.show_fields,
 			module_color=module_color,
 			route_name=payload.route_name,
-			load_meta=False,
 		)
 		voyager.analysis(target_app)
 		return voyager.dump_core_data()
@@ -117,11 +106,90 @@ def create_route(
 		</body>
 		</html>
 		"""
+	
+	class SourcePayload(BaseModel):
+		schema_name: str
 
+	@router.post("/source")
+	def get_object_by_module_name(payload: SourcePayload):
+		"""
+		input: __module__ + __name__, eg: tests.demo.PageStories
+		output: source code of the object
+		"""
+		try:
+			components = payload.schema_name.split('.')
+			if len(components) < 2:
+				return JSONResponse(
+					status_code=400, 
+					content={"error": "Invalid schema name format. Expected format: module.ClassName"}
+				)
+			
+			module_name = '.'.join(components[:-1])
+			class_name = components[-1]
+			
+			mod = __import__(module_name, fromlist=[class_name])
+			obj = getattr(mod, class_name)
+			source_code = get_source(obj)
+			
+			return JSONResponse(content={"source_code": source_code})
+		except ImportError as e:
+			return JSONResponse(
+				status_code=404,
+				content={"error": f"Module not found: {e}"}
+			)
+		except AttributeError as e:
+			return JSONResponse(
+				status_code=404,
+				content={"error": f"Class not found: {e}"}
+			)
+		except Exception as e:
+			return JSONResponse(
+				status_code=500,
+				content={"error": f"Internal error: {str(e)}"}
+			)
+
+	@router.post("/vscode-link")
+	def get_vscode_link_by_module_name(payload: SourcePayload):
+		"""
+		input: __module__ + __name__, eg: tests.demo.PageStories
+		output: source path of the object
+		"""
+		try:
+			components = payload.schema_name.split('.')
+			if len(components) < 2:
+				return JSONResponse(
+					status_code=400, 
+					content={"error": "Invalid schema name format. Expected format: module.ClassName"}
+				)
+			
+			module_name = '.'.join(components[:-1])
+			class_name = components[-1]
+			
+			mod = __import__(module_name, fromlist=[class_name])
+			obj = getattr(mod, class_name)
+			link = get_vscode_link(obj)
+			
+			return JSONResponse(content={"link": link})
+		except ImportError as e:
+			return JSONResponse(
+				status_code=404,
+				content={"error": f"Module not found: {e}"}
+			)
+		except AttributeError as e:
+			return JSONResponse(
+				status_code=404,
+				content={"error": f"Class not found: {e}"}
+			)
+		except Exception as e:
+			return JSONResponse(
+				status_code=500,
+				content={"error": f"Internal error: {str(e)}"}
+			)
+        
 	return router
 
 
-def create_app_with_fastapi(
+def create_voyager(
 	target_app: FastAPI,
 	module_color: dict[str, str] | None = None,
 	gzip_minimum_size: int | None = 500,

fastapi_voyager/type.py

@@ -22,8 +22,6 @@ class Tag(NodeBase):
 @dataclass
 class Route(NodeBase):
     module: str
-    source_code: str = ''
-    vscode_link: str = ''  # optional vscode deep link
     response_schema: str = ''
     is_primitive: bool = True
 
@@ -37,8 +35,6 @@ class ModuleRoute:
 @dataclass
 class SchemaNode(NodeBase):
     module: str
-    source_code: str = ''  # optional for tests / backward compatibility
-    vscode_link: str = ''  # optional vscode deep link
     fields: list[FieldInfo] = field(default_factory=list)
 
 @dataclass

fastapi_voyager/version.py

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

fastapi_voyager/voyager.py

@@ -29,7 +29,6 @@ class Voyager:
             module_color: dict[str, str] | None = None,
             route_name: str | None = None,
             hide_primitive_route: bool = False,
-            load_meta: bool = False
         ):
 
         self.routes: list[Route] = []
@@ -50,7 +49,6 @@ class Voyager:
         self.show_fields = show_fields if show_fields in ('single','object','all') else 'object'
         self.module_color = module_color or {}
         self.route_name = route_name
-        self.load_meta = load_meta
         self.hide_primitive_route = hide_primitive_route
     
 
@@ -85,7 +83,7 @@ class Voyager:
                 self.tags.append(tag_obj)
 
             # add route and create links
-            route_id = f'{route.endpoint.__name__}_{route.path.replace("/", "_")}'
+            route_id = full_class_name(route.endpoint)
             route_name = route.endpoint.__name__
             route_module = route.endpoint.__module__
 
@@ -110,8 +108,6 @@ class Voyager:
                 id=route_id,
                 name=route_name,
                 module=route_module,
-                vscode_link=get_vscode_link(route.endpoint) if self.load_meta else '',
-                source_code=inspect.getsource(route.endpoint) if self.load_meta else '',
                 response_schema=get_type_name(route.response_model),
                 is_primitive=is_primitive_response
             )
@@ -154,8 +150,6 @@ class Voyager:
                 id=full_name, 
                 module=schema.__module__,
                 name=schema.__name__,
-                source_code=get_source(schema) if self.load_meta else '',
-                vscode_link=get_vscode_link(schema) if self.load_meta else '',
                 fields=get_pydantic_fields(schema, bases_fields)
             )
         return full_name

fastapi_voyager/web/component/route-code-display.js

@@ -6,58 +6,119 @@ const { defineComponent, ref, watch, onMounted } = window.Vue;
 //   modelValue: dialog visibility
 //   routes: object map { id: { id, name, source_code } }
 export default defineComponent({
-  name: 'RouteCodeDisplay',
+  name: "RouteCodeDisplay",
   props: {
     routeId: { type: String, required: true },
     modelValue: { type: Boolean, default: false },
     routes: { type: Object, default: () => ({}) },
   },
-  emits: ['close'],
+  emits: ["close"],
   setup(props, { emit }) {
-    const code = ref('');
-    const error = ref(null);
-    const link = ref('');
+    const loading = ref(false);
+    const code = ref("");
+    const error = ref("");
+    const link = ref("");
 
-    function close() { emit('close'); }
+    function close() {
+      emit("close");
+    }
 
     function highlightLater() {
       requestAnimationFrame(() => {
         try {
           if (window.hljs) {
-            const block = document.querySelector('.frv-route-code-display pre code.language-python');
+            const block = document.querySelector(
+              ".frv-route-code-display pre code.language-python"
+            );
             if (block) {
               window.hljs.highlightElement(block);
             }
           }
         } catch (e) {
-          console.warn('highlight failed', e);
+          console.warn("highlight failed", e);
         }
       });
     }
 
-    function load() {
+    async function load() {
+      if (!props.routeId) {
+        code.value = "";
+        return;
+      }
+
+      loading.value = true;
       error.value = null;
-      if (!props.routeId) { code.value=''; return; }
-      const item = props.routes[props.routeId];
-      if (item && item.source_code) {
-        code.value = item.source_code;
-        link.value = item.vscode_link || '';
+      code.value = "";
+      link.value = "";
+
+      // try to fetch from server: POST /source with { schema_name: routeId }
+      const payload = { schema_name: props.routeId };
+      try {
+        const resp = await fetch(`source`, {
+          method: "POST",
+          headers: {
+            Accept: "application/json",
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(payload),
+        });
+
+        const data = await resp.json().catch(() => ({}));
+        if (resp.ok) {
+          code.value = data.source_code || "// no source code available";
+        } else {
+          error.value = (data && data.error) || "Failed to load source";
+        }
+      } catch (e) {
+        error.value = e && e.message ? e.message : "Failed to load source";
+      } finally {
+        loading.value = false;
+      }
+
+      try {
+        const resp = await fetch(`vscode-link`, {
+          method: "POST",
+          headers: {
+            Accept: "application/json",
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(payload),
+        });
+
+        const data = await resp.json().catch(() => ({}));
+        if (resp.ok) {
+          link.value = data.link || "// no source code available";
+        } else {
+          error.value += (data && data.error) || "Failed to load vscode link";
+        }
+      } catch (e) {
+      } finally {
+        loading.value = false;
+      }
+
+      if (!error.value) {
         highlightLater();
-      } else if (item) {
-        code.value = '// no source code available';
-        link.value = item.vscode_link || '';
-      } else {
-        error.value = 'Route not found';
-        link.value = '';
       }
     }
 
-    watch(() => props.modelValue, (v) => { if (v) load(); });
-    watch(() => props.routeId, () => { if (props.modelValue) load(); });
+    watch(
+      () => props.modelValue,
+      (v) => {
+        if (v) load();
+      }
+    );
+    watch(
+      () => props.routeId,
+      () => {
+        if (props.modelValue) load();
+      }
+    );
 
-    onMounted(() => { if (props.modelValue) load(); });
+    onMounted(() => {
+      if (props.modelValue) load();
+    });
 
-    return { code, error, close, link };
+    return { loading, code, error, close, link };
   },
   template: `
   <div class="frv-route-code-display" style="border:1px solid #ccc; position:relative; width:50vw; max-width:50vw; height:100%; background:#fff;">
@@ -66,8 +127,9 @@ export default defineComponent({
       <a :href="link" target="_blank" rel="noopener" style="font-size:12px; color:#3b82f6;">Open in VSCode</a>
     </div>
     <div style="padding:40px 16px 16px 16px; height:100%; box-sizing:border-box; overflow:auto;">
-      <div v-if="error" style="color:#c10015; font-family:Menlo, monospace; font-size:12px;">{{ error }}</div>
+      <div v-if="loading" style="font-family:Menlo, monospace; font-size:12px;">Loading source...</div>
+      <div v-else-if="error" style="color:#c10015; font-family:Menlo, monospace; font-size:12px;">{{ error }}</div>
       <pre v-else style="margin:0;"><code class="language-python">{{ code }}</code></pre>
     </div>
-  </div>`
+  </div>`,
 });

fastapi_voyager/web/component/schema-code-display.js

@@ -14,7 +14,6 @@ export default defineComponent({
   props: {
     schemaName: { type: String, required: true },
     modelValue: { type: Boolean, default: false },
-    source: { type: String, default: null },
     schemas: { type: Array, default: () => [] },
   },
   emits: ["close"],
@@ -22,9 +21,9 @@ export default defineComponent({
     const loading = ref(false);
     const code = ref("");
     const link = ref("");
-    const error = ref(null);
+    const error = ref("");
     const fields = ref([]); // schema fields list
-    const tab = ref('source');
+    const tab = ref("source");
 
     function close() {
       emit("close");
@@ -48,38 +47,71 @@ export default defineComponent({
       });
     }
 
-    function loadSource() {
+    async function loadSource() {
       if (!props.schemaName) return;
-      if (props.source) {
-        code.value = props.source;
-        highlightLater();
-        return;
-      }
+
       loading.value = true;
       error.value = null;
+      code.value = "";
+      link.value = "";
+
+      // try to fetch from server: /source/{schema_name}
+      const payload = { schema_name: props.schemaName };
       try {
-        const item = props.schemas.find((s) => s.fullname === props.schemaName);
-        if (item) {
-          link.value = item.vscode_link || "";
-          code.value = item.source_code || "// no source code available";
-          // capture fields if provided
-          fields.value = Array.isArray(item.fields) ? item.fields : [];
-          highlightLater();
+        // validate input: ensure we have a non-empty schemaName
+        const resp = await fetch(`source`, {
+          method: "POST",
+          headers: {
+            Accept: "application/json",
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(payload),
+        });
+        // surface server-side validation message for bad request
+        const data = await resp.json().catch(() => ({}));
+        if (resp.ok) {
+          code.value = data.source_code || "// no source code available";
         } else {
-          error.value = "Schema not found";
+          error.value = (data && data.error) || "Failed to load source";
         }
       } catch (e) {
         error.value = "Failed to load source";
       } finally {
         loading.value = false;
       }
+
+      try {
+        const resp = await fetch(`vscode-link`, {
+          method: "POST",
+          headers: {
+            Accept: "application/json",
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(payload),
+        });
+        // surface server-side validation message for bad request
+        const data = await resp.json().catch(() => ({}));
+        if (resp.ok) {
+          link.value = data.link || "// no vscode link available";
+        } else {
+          error.value += (data && data.error) || "Failed to load source";
+        }
+      } catch (e) {
+        error.value = "Failed to load source";
+      } finally {
+        loading.value = false;
+      }
+
+      if (!error.value && tab.value === "source") {
+        highlightLater();
+      }
     }
 
     // re-highlight when switching back to source tab
     watch(
       () => tab.value,
       (val) => {
-        if (val === 'source') {
+        if (val === "source") {
           highlightLater();
         }
       }

fastapi_voyager/web/component/schema-field-filter.js

@@ -43,8 +43,8 @@ export default defineComponent({
       state.error = null;
       state.schemas = Array.isArray(props.schemas) ? props.schemas : [];
       state.schemaOptions = state.schemas.map((s) => ({
-        label: `${s.name} (${s.fullname})`,
-        value: s.fullname,
+        label: `${s.name} (${s.id})`,
+        value: s.id,
       }));
       // Maintain compatibility: loadingSchemas flag toggled quickly (no async work)
       state.loadingSchemas = false;
@@ -54,8 +54,8 @@ export default defineComponent({
       const needle = (val || "").toLowerCase();
       update(() => {
         let opts = state.schemas.map((s) => ({
-          label: `${s.name} (${s.fullname})`,
-          value: s.fullname,
+          label: `${s.name} (${s.id})`,
+          value: s.id,
         }));
         if (needle) {
           opts = opts.filter((o) => o.label.toLowerCase().includes(needle));
@@ -67,7 +67,7 @@ export default defineComponent({
     function onSchemaChange(val) {
       state.schemaFullname = val;
       state.fieldName = null;
-      const schema = state.schemas.find((s) => s.fullname === val);
+      const schema = state.schemas.find((s) => s.id === val);
       state.fieldOptions = schema ? schema.fields.map((f) => f.name) : [];
     }
 
@@ -106,9 +106,9 @@ export default defineComponent({
     function applyExternalSchema(name) {
       if (!name || !state.schemas.length) return;
       if (lastAppliedExternal === name) return; // avoid duplicate
-      const schema = state.schemas.find((s) => s.fullname === name);
+      const schema = state.schemas.find((s) => s.id === name);
       if (!schema) return;
-      state.schemaFullname = schema.fullname;
+      state.schemaFullname = schema.id;
       state.fieldOptions = schema.fields.map((f) => f.name);
       state.fieldName = null; // reset field for external injection
       lastAppliedExternal = name;

fastapi_voyager/web/graph-ui.js

@@ -110,7 +110,7 @@ export class GraphUI {
     });
   }
 
-  async render(dotSrc) {
+  async render(dotSrc, resetZoom = true) {
     const height = this.options.height || "100%";
     return new Promise((resolve, reject) => {
       try {
@@ -126,7 +126,7 @@ export class GraphUI {
           .renderDot(dotSrc)
           .on("end", () => {
             $(this.selector).data("graphviz.svg").setup();
-            this.graphviz.resetZoom();
+            if (resetZoom) this.graphviz.resetZoom();
             resolve();
           });
       } catch (err) {

fastapi_voyager/web/index.html

@@ -89,13 +89,20 @@
       >
         <div class="row items-center q-col-gutter-md">
           <div class="col-auto">
-            <div style="width: 282px; margin-left: 8px;" class="text-h6">FastAPI Voyager</div>
+            <div
+              style="width: 282px; margin-left: 8px"
+              class="text-h6 text-primary"
+            >
+              <q-icon class="q-mr-sm" name="satellite_alt"></q-icon>
+              <span> FastAPI Voyager </span>
+            </div>
           </div>
           <div class="col-auto">
             <div class="column">
               <q-option-group
                 v-model="state.showFields"
                 :options="state.fieldOptions"
+                @update:model-value="(val) => toggleShowField(val)"
                 color="primary"
                 type="radio"
                 inline
@@ -104,7 +111,6 @@
             </div>
           </div>
 
-
           <!-- <div class="col-auto">
             <q-btn-dropdown
               class="q-ml-md"
@@ -126,11 +132,31 @@
           </div> -->
 
           <div class="col-auto q-ml-auto">
-            <q-toggle class="q-ml-md" v-model="state.brief" label="Brief Mode" title="config module_prefix to enable it" dense />
-            <q-toggle class="q-ml-md" v-model="state.hidePrimitiveRoute" label="Hide Primitive Routes" title="" dense />
+            <q-toggle
+              class="q-ml-md"
+              v-model="state.brief"
+              label="Brief Mode"
+              @update:model-value="(val) => toggleBrief(val)"
+              title="skip middle classes, config module_prefix to enable it"
+              dense
+            />
+          </div>
+          <div class="col-auto">
+            <q-toggle
+              v-model="state.hidePrimitiveRoute"
+              @update:model-value="(val) => toggleHidePrimitiveRoute(val)"
+              label="Hide Primitive"
+              title="hide routes return primitive"
+              dense
+            />
           </div>
           <div class="col-auto">
-            <q-btn outline @click="onReset" title="may be very slow" label="Show All" />
+            <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()" />
@@ -171,57 +197,80 @@
           </div>
         </div>
       </div>
-      <div class="row no-wrap" style="flex: 1 1 auto; min-height: 0; height: 100px;">
-        <div
-          class="column no-wrap"
-          :style="{
-            minWidth: '300px',
-            width: '300px',
-            borderRight: '1px solid #e0e0e0',
-            backgroundColor: '#fff',
-            minHeight: 0,
-          }"
+      <div style="flex: 1 1 auto; min-height: 0;">
+        <q-splitter
+          v-model="state.splitter"
+          unit="px"
+          :limits="[200, 800]"
+          class="fit"
         >
-          <q-scroll-area class="fit">
-            <q-list dense separator>
-              <q-expansion-item
-                v-for="tag in state.rawTags"
-                :key="tag.name"
-                expand-separator
-                :model-value="state.tag === tag.name"
-                @update:model-value="(val) => toggleTag(tag.name, val)"
-                :header-class="state.tag === tag.name ? 'text-primary text-bold' : ''"
-                content-class="q-pa-none"
-              >
-                <template #header>
-                  <div class="row items-center" style="width: 100%">
-                    <div class="">{{ tag.name }}</div>
-                  </div>
-                </template>
-
-                <q-list separator>
-                  <q-item
-                    v-for="route in (state.hidePrimitiveRoute ? tag.routes.filter(r => !r.is_primitive) :tag.routes || [])"
-                    :key="route.id"
-                    clickable
-                    v-ripple
-                    :active="state.routeId === route.id"
-                    active-class=""
-                    @click="selectRoute(route.id)"
+          <template #before>
+            <div
+              id="tag-navigator"
+              class="column no-wrap"
+              :style="{
+                borderRight: '1px solid #e0e0e0',
+                backgroundColor: '#fff',
+                minHeight: 0,
+                height: '100%'
+              }"
+            >
+              <q-scroll-area class="fit">
+                <q-list dense separator>
+                  <q-expansion-item
+                    v-for="tag in state.rawTags"
+                    :key="tag.name"
+                    expand-separator
+                    :model-value="state.tag === tag.name"
+                    @update:model-value="(val) => toggleTag(tag.name, val)"
+                    :header-class="state.tag === tag.name ? 'text-primary text-bold' : ''"
+                    content-class="q-pa-none"
                   >
-                    <q-item-section>
-                      <span class="q-ml-sm"> <span style="font-weight: bold;">⋅</span> &nbsp; {{ route.name }}</span>
-                    </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>
+                    <template #header>
+                      <div class="row items-center" style="width: 100%">
+                        <div class="row items-end">
+                          <q-icon
+                            class="q-mr-sm"
+                            :name="state.tag == tag.name ? 'folder' : 'folder_open'"
+                          ></q-icon>
+                          <span>{{ tag.name }}</span>
+                        </div>
+                      </div>
+                    </template>
+
+                    <q-list separator>
+                      <q-item
+                        v-for="route in (state.hidePrimitiveRoute ? tag.routes.filter(r => !r.is_primitive) :tag.routes || [])"
+                        :key="route.id"
+                        clickable
+                        v-ripple
+                        :active="state.routeId === route.id"
+                        active-class=""
+                        @click="selectRoute(route.id)"
+                      >
+                        <q-item-section>
+                          <span class="q-ml-lg" style="white-space: nowrap">
+                            <q-icon class="q-mr-sm" name="data_object"></q-icon>
+                            {{ route.name }}
+                          </span>
+                        </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-expansion-item>
-            </q-list>
-          </q-scroll-area>
-        </div>
-        <div id="graph"></div>
+              </q-scroll-area>
+            </div>
+          </template>
+
+          <template #after>
+            <div id="graph" class="fit"></div>
+          </template>
+        </q-splitter>
       </div>
 
       <!-- Detail Dialog -->

fastapi_voyager/web/vue-main.js

@@ -13,7 +13,7 @@ const app = createApp({
       tagOptions: [], // array of strings
       routeId: null,
       routeOptions: [], // [{ label, value }]
-      schemaFullname: null,
+      schemaId: null,
       schemaOptions: [], // [{ label, value }]
       routeItems: {}, // { id: { label, value } }
       showFields: "object",
@@ -26,9 +26,11 @@ const app = createApp({
       hidePrimitiveRoute: false,
       generating: false,
       rawTags: [], // [{ name, routes: [{ id, name }] }]
-      rawSchemas: [], // [{ name, fullname }]
+      rawSchemas: [], // [{ name, id }]
       rawSchemasFull: [], // full objects with source_code & fields
       initializing: true,
+      // Splitter size (left panel width in px)
+      splitter: 300,
     });
     const showDetail = ref(false);
     const showSchemaFieldFilter = ref(false);
@@ -45,6 +47,7 @@ const app = createApp({
     const schemaFieldFilterSchema = ref(null); // external schemaName for schema-field-filter
     const schemaCodeName = ref("");
     const routeCodeId = ref("");
+
     function openDetail() {
       showDetail.value = true;
     }
@@ -68,10 +71,10 @@ const app = createApp({
     function onFilterSchemas(val, update) {
       const normalized = (val || "").toLowerCase();
       update(() => {
-        const makeLabel = (s) => `${s.name} (${s.fullname})`;
+        const makeLabel = (s) => `${s.name} (${s.id})`;
         let list = state.rawSchemas.map((s) => ({
           label: makeLabel(s),
-          value: s.fullname,
+          value: s.id,
         }));
         if (normalized) {
           list = list.filter((opt) =>
@@ -91,7 +94,7 @@ const app = createApp({
         state.rawSchemasFull = Array.isArray(data.schemas) ? data.schemas : [];
         state.rawSchemas = state.rawSchemasFull.map((s) => ({
           name: s.name,
-          fullname: s.fullname,
+          id: s.id,
         }));
         state.routeItems = data.tags
           .map((t) => t.routes)
@@ -103,8 +106,8 @@ const app = createApp({
 
         state.tagOptions = state.rawTags.map((t) => t.name);
         state.schemaOptions = state.rawSchemas.map((s) => ({
-          label: `${s.name} (${s.fullname})`,
-          value: s.fullname,
+          label: `${s.name} (${s.id})`,
+          value: s.id,
         }));
         // default route options placeholder
         state.routeOptions = [];
@@ -115,16 +118,16 @@ const app = createApp({
       }
     }
 
-    async function onGenerate() {
+    async function onGenerate(resetZoom = true) {
       state.generating = true;
       try {
         const payload = {
           tags: state.tag ? [state.tag] : null,
-          schema_name: state.schemaFullname || null,
+          schema_name: state.schemaId || null,
           route_name: state.routeId || null,
           show_fields: state.showFields,
           brief: state.brief,
-          hide_primitive_route: state.hidePrimitiveRoute
+          hide_primitive_route: state.hidePrimitiveRoute,
         };
 
         const res = await fetch("dot", {
@@ -136,28 +139,28 @@ const app = createApp({
 
         // create graph instance once
         const graphUI = new GraphUI("#graph", {
-          onSchemaClick: (name) => {
-            if (state.rawSchemas.find((s) => s.fullname === name)) {
-              schemaFieldFilterSchema.value = name;
+          onSchemaClick: (id) => {
+            if (state.rawSchemas.find((s) => s.id === id)) {
+              schemaFieldFilterSchema.value = id;
               showSchemaFieldFilter.value = true;
             }
           },
-          onSchemaAltClick: (name) => {
-            // priority: schema full name; else route id
-            if (state.rawSchemas.find((s) => s.fullname === name)) {
-              schemaCodeName.value = name;
+          onSchemaAltClick: (id) => {
+            // priority: schema id; else route id
+            if (state.rawSchemas.find((s) => s.id === id)) {
+              schemaCodeName.value = id;
               showSchemaCode.value = true;
               return;
             }
-            if (name in state.routeItems) {
-              routeCodeId.value = name;
+            if (id in state.routeItems) {
+              routeCodeId.value = id;
               showRouteCode.value = true;
               return;
             }
           },
         });
 
-        await graphUI.render(dotText);
+        await graphUI.render(dotText, resetZoom);
       } catch (e) {
         console.error("Generate failed", e);
       } finally {
@@ -169,7 +172,7 @@ const app = createApp({
       try {
         const payload = {
           tags: state.tag ? [state.tag] : null,
-          schema_name: state.schemaFullname || null,
+          schema_name: state.schemaId || null,
           route_name: state.routeId || null,
           show_fields: state.showFields,
           brief: state.brief,
@@ -230,66 +233,44 @@ const app = createApp({
     async function onReset() {
       state.tag = null;
       state.routeId = "";
-      state.schemaFullname = null;
-      state.showFields = "object";
+      state.schemaId = null;
+      // state.showFields = "object";
       state.brief = false;
-      onGenerate()
-      // await loadInitial();
+      onGenerate();
     }
 
     function toggleTag(tagName, expanded = null) {
       if (expanded === true) {
         state.tag = tagName;
+        state.routeId = "";
+        onGenerate();
         return;
       }
     }
 
     function selectRoute(routeId) {
       if (state.routeId === routeId) {
-        state.routeId = ''
+        state.routeId = "";
       } else {
-        state.routeId = routeId
+        state.routeId = routeId;
       }
-      onGenerate()
+      onGenerate();
     }
 
-    // react to tag changes to rebuild routes
-    watch(
-      () => state.tag,
-      (val) => {
-        if (!state.initializing) {
-          state.routeId = ''
-          onGenerate();
-        }
-      }
-    );
-
-    watch(
-      () => state.showFields,
-      () => {
-        if (!state.initializing) {
-          onGenerate();
-        }
-      }
-    )
+    function toggleShowField(field) {
+      state.showFields = field;
+      onGenerate(false);
+    }
 
-    watch(
-      () => state.brief,
-      () => {
-        if (!state.initializing) {
-          onGenerate();
-        }
-      }
-    );
+    function toggleBrief(val) {
+      state.brief = val;
+      onGenerate();
+    }
 
-    watch(
-      () => state.hidePrimitiveRoute,
-      () => {
-        if (!state.initializing) {
-          onGenerate();
-        }
-      }
-    );
+    function toggleHidePrimitiveRoute(val) {
+      state.hidePrimitiveRoute = val;
+      onGenerate(false);
+    }
 
     onMounted(async () => {
       await loadInitial();
@@ -298,6 +279,8 @@ const app = createApp({
     return {
       state,
       toggleTag,
+      toggleBrief,
+      toggleHidePrimitiveRoute,
       selectRoute,
       onFilterTags,
       onFilterSchemas,
@@ -326,10 +309,15 @@ const app = createApp({
       // render graph dialog
       showRenderGraph,
       renderCoreData,
+      toggleShowField,
     };
   },
 });
 app.use(window.Quasar);
+// Set Quasar primary theme color to green
+if (window.Quasar && typeof window.Quasar.setCssVar === "function") {
+  window.Quasar.setCssVar("primary", "#009485");
+}
 app.component("schema-field-filter", SchemaFieldFilter);
 app.component("schema-code-display", SchemaCodeDisplay);
 app.component("route-code-display", RouteCodeDisplay);

{fastapi_voyager-0.8.2.dist-info → fastapi_voyager-0.9.1.dist-info}/METADATA

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: fastapi-voyager
-Version: 0.8.2
+Version: 0.9.1
 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
@@ -30,6 +30,10 @@ Description-Content-Type: text/markdown
 
 <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, currently it supports pydantic v2 only, previous name: fastapi-router-viz
 
 Inspect your API interactively
@@ -105,10 +109,10 @@ click a node to highlight it's upperstream and downstream nodes. figure out the
 
 ```python
 from fastapi import FastAPI
-from fastapi_voyager.server import create_app_with_fastapi
+from fastapi_voyager import create_voyager
 from tests.demo import app
 
-app.mount('/voyager', create_app_with_fastapi(
+app.mount('/voyager', create_voyager(
     app, 
     module_color={"tests.service": "red"}, 
     module_prefix="tests.service"))
@@ -164,7 +168,7 @@ or you can open router_viz.dot with vscode extension `graphviz interactive previ
 
 ## Plan before v1.0
 
-features:
+### features:
 - [x] group schemas by module hierarchy
 - [x] module-based coloring via Analytics(module_color={...})
 - [x] view in web browser
@@ -183,38 +187,62 @@ features:
 - [x] add tooltips
 - [x] route
     - [x] group routes by module hierarchy
-    - [ ] add response_model in route
-- [ ] support dataclass (pending)
-- [ ] click field to highlight links
+    - [x] add response_model in route
+- [x] fixed left bar show tag/ route
+- [x] export voyager core data into json (for better debugging)
+    - [x] add api to rebuild core data from json, and render it
+- [x] fix Generic case  `test_generic.py`
+- [x] show tips for routes not return pydantic type.
+- [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
-- [ ] ui optimization
-    - [ ] fixed left/right bar show field information
-    - [x] fixed left bar show tag/ route
-- [ ] display standard ER diagram `difference`
+- [ ] fixed left/right bar show field information
+- [ ] display standard ER diagram `hard`
     - [ ] display potential invalid links
-- [ ] integration with pydantic-resolve
-    - [ ] show difference between resolve, post fields
-    - [x] strikethrough for excluded fields
-    - [ ] display loader as edges
-- [x] export voyager core data into json (for better debugging)
-    - [x] add api to rebuild core data from json, and render it
-- [x] fix Generic case  `test_generic.py`
-- [ ] show tips for routes not return pydantic type.
-- [ ] add http method for route
 
 bugs & non feature:
-- [x] fix duplicated link from class and parent class, it also break clicking highlight
 - [ ] add tests
-- [x] refactor
-    - [x] abstract render module
+- [ ] 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
+    - [x] add doc for parameters
+- [x] improve initialization time cost
+    - [x] query route / schema info through realtime api
+    - [x] adjust fe
+
+#### 0.10
+- [ ] logging information
+- [ ] open route in swagger
+    - config docs path
+- [ ] add http method for route
+- [ ] enable/disable module cluster  (may save space)
+
+#### 0.11
+- [ ] integration with pydantic-resolve
+    - [ ] show hint for resolve, post fields
+    - [ ] display loader as edges
+
 
 ## Using with pydantic-resolve
 
+WIP: ...
+
 pydantic-resolve's @ensure_subset decorator is helpful to pick fields from `source class` in safe.
 
-TODO: ...
 
 
 ## Credits
@@ -225,7 +253,13 @@ TODO: ...
 
 ## Changelog
 
+- 0.9:
+    - 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.
 - 0.8:
+    - 0.8.3
+        - upgrade theme
     - 0.8.2
         - fix silly typo.
     - 0.8.1

{fastapi_voyager-0.8.2.dist-info → fastapi_voyager-0.9.1.dist-info}/RECORD

@@ -1,24 +1,24 @@
-fastapi_voyager/__init__.py,sha256=E5WTV_sYs2LK8I6jzA7AuvFU5a8_vjnDseC3DMha0iQ,149
-fastapi_voyager/cli.py,sha256=2eixX7mtPsZvukc4vrwQOt6XTPJgHUKIGLBy3IIC2jE,11127
+fastapi_voyager/__init__.py,sha256=tZy0Nkj8kTaMgbvHy-mGxVcFGVX0Km-36dnzsAIG2uk,230
+fastapi_voyager/cli.py,sha256=kQb4g6JEGZR99e5r8LyFFEeb_-uT-n_gp_sDoYG3R7k,11118
 fastapi_voyager/filter.py,sha256=2Yt37o8mhqSqleafO4YRrumh_ExYUqzXFOxQRPuTbAc,8078
 fastapi_voyager/module.py,sha256=Z2QHNmiLk6ZAJlm2nSmO875Q33TweSg8UxZSzIpU9zY,3499
 fastapi_voyager/render.py,sha256=qy3g1Rz1s8XkuR_6n1Q1YPwy_oMOjWjNswTHQjdz4N0,7765
-fastapi_voyager/server.py,sha256=Q9-f0frKHC4d0vN8ZasZyw6AsWKwLRB0P7z8dZ0lzjQ,4108
-fastapi_voyager/type.py,sha256=k62cDofqmy-2q5rInW5LydLaRuDpKLsdbapps8Osqys,1838
+fastapi_voyager/server.py,sha256=pg-LHDj4yU0usDA1b2X2Kt2_OCrexFA2G9ifGxb52Uc,6196
+fastapi_voyager/type.py,sha256=pWYKmgb9e0W_JeD7k54Mr2lxUZV_Ir9TNpewGRwHyHQ,1629
 fastapi_voyager/type_helper.py,sha256=hjBC4E0tgBpQDlYxGg74uK07SXjsrAgictEETJfIpYM,9231
-fastapi_voyager/version.py,sha256=yVKW8UNsBx7oBKPkkSearnWpjZ_4I3OjOtDJSd778OY,48
-fastapi_voyager/voyager.py,sha256=Tz-cJW1Pg9Ei6zX2CPCdAnkTqErp2OIIhhxeeDd6Nss,11221
-fastapi_voyager/web/graph-ui.js,sha256=eEjDnJVMvk35LdRoxcqX_fZxLFS9_bUrGAZL6K2O5C0,4176
+fastapi_voyager/version.py,sha256=jjAALUE-D-m7hgihxqGZyrZQPe4_Ch5MQPu89WFuVmw,48
+fastapi_voyager/voyager.py,sha256=pXvA3ye5Jq6aJ6YrZFbTHjJ9MzdydqWllIgY8RFK_4A,10793
+fastapi_voyager/web/graph-ui.js,sha256=0hqMCzsPJfhgWDuwiXVXaGQL-_7urT_zryo4sXMN8jQ,4209
 fastapi_voyager/web/graphviz.svg.css,sha256=zDCjjpT0Idufu5YOiZI76PL70-avP3vTyzGPh9M85Do,1563
 fastapi_voyager/web/graphviz.svg.js,sha256=lvAdbjHc-lMSk4GQp-iqYA2PCFX4RKnW7dFaoe0LUHs,16005
-fastapi_voyager/web/index.html,sha256=iv4Fd0RsX854ZWrfSnVn-369_ky9ubFlK36vLiAbd0w,12760
+fastapi_voyager/web/index.html,sha256=AnsqXfzDrUPO12EWtiT_XJdJ6Kx3qBsRn1IfX393G48,14298
 fastapi_voyager/web/quasar.min.css,sha256=F5jQe7X2XT54VlvAaa2V3GsBFdVD-vxDZeaPLf6U9CU,203145
 fastapi_voyager/web/quasar.min.js,sha256=h0ftyPMW_CRiyzeVfQqiup0vrVt4_QWojpqmpnpn07E,502974
-fastapi_voyager/web/vue-main.js,sha256=f4re2Hys0FOli3R_AZ_byUd08YLScDZ01xf1hXeoHCA,9529
+fastapi_voyager/web/vue-main.js,sha256=p8akwqNf9sDM71xio0SN-3JznUOIksoy9SGRiqAeg2s,9459
 fastapi_voyager/web/component/render-graph.js,sha256=e8Xgh2Kl-nYU0P1gstEmAepCgFnk2J6UdxW8TlMafGs,2322
-fastapi_voyager/web/component/route-code-display.js,sha256=NECC1OGcPCdDfbghtRJEnmFM6HmH5J3win2ibapWPeA,2649
-fastapi_voyager/web/component/schema-code-display.js,sha256=oOusgTvCaWGnoKb-NBwu0SXqJJf2PTUtp3lUczokTBM,5515
-fastapi_voyager/web/component/schema-field-filter.js,sha256=5lK2mdgp7_UWcwURi9djRCkIwih-3f4EmDbhKFuLBDc,6266
+fastapi_voyager/web/component/route-code-display.js,sha256=4VN88n_7FYHxvruP5AbgTdF6Lyj6v_7Ocqy8zOVMjVA,4065
+fastapi_voyager/web/component/schema-code-display.js,sha256=_Okkr8ceJsA_Xngyj_GpxJqdN01GzCjJTeAZamSA9Ks,6514
+fastapi_voyager/web/component/schema-field-filter.js,sha256=1llPkN8w-RrBPHVtjjMcObndaqPnmZ7e4iU6dMJMIaE,6224
 fastapi_voyager/web/icon/android-chrome-192x192.png,sha256=35sBy6jmUFJCcquStaafHH1qClZIbd-X3PIKSeLkrNo,37285
 fastapi_voyager/web/icon/android-chrome-512x512.png,sha256=eb2eDjCwIruc05029_0L9hcrkVkv8KceLn1DJMYU0zY,210789
 fastapi_voyager/web/icon/apple-touch-icon.png,sha256=gnWK46tPnvSw1-oYZjgI02wpoO4OrIzsVzGHC5oKWO0,33187
@@ -26,8 +26,8 @@ fastapi_voyager/web/icon/favicon-16x16.png,sha256=JC07jEzfIYxBIoQn_FHXvyHuxESdhW
 fastapi_voyager/web/icon/favicon-32x32.png,sha256=C7v1h58cfWOsiLp9yOIZtlx-dLasBcq3NqpHVGRmpt4,1859
 fastapi_voyager/web/icon/favicon.ico,sha256=tZolYIXkkBcFiYl1A8ksaXN2VjGamzcSdes838dLvNc,15406
 fastapi_voyager/web/icon/site.webmanifest,sha256=ep4Hzh9zhmiZF2At3Fp1dQrYQuYF_3ZPZxc1KcGBvwQ,263
-fastapi_voyager-0.8.2.dist-info/METADATA,sha256=yLmyNrBFAkmFtX1EiHUf_m_2n7uM56Q9vK1s8MV_RNM,8082
-fastapi_voyager-0.8.2.dist-info/WHEEL,sha256=qtCwoSJWgHk21S1Kb4ihdzI2rlJ1ZKaIurTj_ngOhyQ,87
-fastapi_voyager-0.8.2.dist-info/entry_points.txt,sha256=pEIKoUnIDXEtdMBq8EmXm70m16vELIu1VPz9-TBUFWM,53
-fastapi_voyager-0.8.2.dist-info/licenses/LICENSE,sha256=lNVRR3y_bFVoFKuK2JM8N4sFaj3m-7j29kvL3olFi5Y,1067
-fastapi_voyager-0.8.2.dist-info/RECORD,,
+fastapi_voyager-0.9.1.dist-info/METADATA,sha256=7yR9Wj87QH6f2kxA4QiqDnwWJPQ2-rGOhpC6ZYYfHfE,8914
+fastapi_voyager-0.9.1.dist-info/WHEEL,sha256=qtCwoSJWgHk21S1Kb4ihdzI2rlJ1ZKaIurTj_ngOhyQ,87
+fastapi_voyager-0.9.1.dist-info/entry_points.txt,sha256=pEIKoUnIDXEtdMBq8EmXm70m16vELIu1VPz9-TBUFWM,53
+fastapi_voyager-0.9.1.dist-info/licenses/LICENSE,sha256=lNVRR3y_bFVoFKuK2JM8N4sFaj3m-7j29kvL3olFi5Y,1067
+fastapi_voyager-0.9.1.dist-info/RECORD,,