fastapi-voyager 0.10.3__tar.gz → 0.10.5__tar.gz

{fastapi_voyager-0.10.3 → fastapi_voyager-0.10.5}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: fastapi-voyager
-Version: 0.10.3
+Version: 0.10.5
 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
@@ -32,7 +32,9 @@ Description-Content-Type: text/markdown
 
 > This repo is still in early stage, it supports pydantic v2 only
 
-Inspect your API interactively!
+Inspect your API 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>
@@ -170,6 +172,8 @@ or you can open router_viz.dot with vscode extension `graphviz interactive previ
 - [ ] optimize static resource (allow manually config url)
 - [ ] improve search dialog
     - [ ] add route/tag list
+- [ ] type alias should not be kept as node instead of compiling to original type
+- [ ] how to correctly handle the generic type ?
 
 ### in analysis
 - [ ] click field to highlight links
@@ -240,6 +244,11 @@ or you can open router_viz.dot with vscode extension `graphviz interactive previ
     - [x] fix focus in brief-mode
     - [x] ui: adjust focus position
     - [x] refactor naming
+- 0.10.4
+    - [x] fix: when focus is on, should ensure changes from other params not broken.
+- 0.10.5
+    - [x] double click to show details, and highlight as tomato
+    
 
 #### 0.11
 - [ ] enable/disable module cluster  (to save space)
@@ -248,6 +257,11 @@ or you can open router_viz.dot with vscode extension `graphviz interactive previ
 - [ ] support opening route in swagger
     - config docs path
 - [ ] add tests
+- [ ] fix: focus should reset zoom
+- [ ] sort field name
+- [ ] set max limit for fields
+- [ ] add info icon alone with schema node
+- [ ] add loading for field detail panel
 
 #### 0.12
 - [ ] integration with pydantic-resolve

{fastapi_voyager-0.10.3 → fastapi_voyager-0.10.5}/README.md

@@ -5,7 +5,9 @@
 
 > This repo is still in early stage, it supports pydantic v2 only
 
-Inspect your API interactively!
+Inspect your API 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>
@@ -143,6 +145,8 @@ or you can open router_viz.dot with vscode extension `graphviz interactive previ
 - [ ] optimize static resource (allow manually config url)
 - [ ] improve search dialog
     - [ ] add route/tag list
+- [ ] type alias should not be kept as node instead of compiling to original type
+- [ ] how to correctly handle the generic type ?
 
 ### in analysis
 - [ ] click field to highlight links
@@ -213,6 +217,11 @@ or you can open router_viz.dot with vscode extension `graphviz interactive previ
     - [x] fix focus in brief-mode
     - [x] ui: adjust focus position
     - [x] refactor naming
+- 0.10.4
+    - [x] fix: when focus is on, should ensure changes from other params not broken.
+- 0.10.5
+    - [x] double click to show details, and highlight as tomato
+    
 
 #### 0.11
 - [ ] enable/disable module cluster  (to save space)
@@ -221,6 +230,11 @@ or you can open router_viz.dot with vscode extension `graphviz interactive previ
 - [ ] support opening route in swagger
     - config docs path
 - [ ] add tests
+- [ ] fix: focus should reset zoom
+- [ ] sort field name
+- [ ] set max limit for fields
+- [ ] add info icon alone with schema node
+- [ ] add loading for field detail panel
 
 #### 0.12
 - [ ] integration with pydantic-resolve

{fastapi_voyager-0.10.3 → fastapi_voyager-0.10.5}/src/fastapi_voyager/render.py

@@ -37,7 +37,7 @@ class Renderer:
             fields_parts.append(field_str)
 
         header_color = 'tomato' if node.id == self.schema else '#009485'
-        header = f"""<tr><td cellpadding="1.5" bgcolor="{header_color}" align="center" colspan="1" port="{PK}"> <font color="white">    {node.name}    </font> </td> </tr>"""
+        header = f"""<tr><td cellpadding="6" bgcolor="{header_color}" align="center" colspan="1" port="{PK}"> <font color="white">    {node.name}    </font></td> </tr>"""
         field_content = ''.join(fields_parts) if fields_parts else ''
         return f"""<<table border="1" cellborder="0" cellpadding="0" bgcolor="white"> {header} {field_content}   </table>>"""
 

{fastapi_voyager-0.10.3 → fastapi_voyager-0.10.5}/src/fastapi_voyager/version.py

@@ -1,2 +1,2 @@
 __all__ = ["__version__"]
-__version__ = "0.10.3"
+__version__ = "0.10.5"

{fastapi_voyager-0.10.3 → fastapi_voyager-0.10.5}/src/fastapi_voyager/web/component/schema-field-filter.js

@@ -42,11 +42,12 @@ export default defineComponent({
     async function loadSchemas() {
       // Use externally provided props.schemas dict directly; no network call.
       state.error = null;
-      const dict = props.schemas && typeof props.schemas === "object" ? 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})`,
+        label: `${s.name} - ${s.id}`,
         value: s.id,
       }));
       // Maintain compatibility: loadingSchemas flag toggled quickly (no async work)
@@ -57,7 +58,7 @@ export default defineComponent({
       const needle = (val || "").toLowerCase();
       update(() => {
         let opts = state.schemas.map((s) => ({
-          label: `${s.name} (${s.id})`,
+          label: `${s.name} - ${s.id}`,
           value: s.id,
         }));
         if (needle) {
@@ -127,7 +128,6 @@ export default defineComponent({
       }
     });
 
-
     function close() {
       emit("close");
     }
@@ -178,13 +178,12 @@ export default defineComponent({
 				:disable="!state.schemaFullname" 
 				:loading="state.querying" 
 				@click="onQuery" />
-		</div>
 				<q-btn
 					flat dense round icon="close"
 					aria-label="Close"
 					@click="close"
-					style="position:absolute; top:6px; right:6px; z-index:11; background:rgba(255,255,255,0.85);"
 				/>
+		</div>
 		<div v-if="state.error" style="position:absolute; top:52px; left:8px; z-index:10; color:#c10015; font-size:12px;">{{ state.error }}</div>
 		<div id="graph-schema-field" style="width:100%; height:100%; overflow:auto; background:#fafafa"></div>
 	</div>

{fastapi_voyager-0.10.3 → fastapi_voyager-0.10.5}/src/fastapi_voyager/web/graph-ui.js

@@ -57,6 +57,13 @@ export class GraphUI {
     return $result;
   }
 
+  highlightSchemaBanner(node) {
+    const ele = node.querySelector("polygon[fill='#009485']")
+    if (ele) {
+      ele.setAttribute('fill', 'tomato');
+    }
+  }
+
   _init() {
     const self = this;
     $(this.selector).graphviz({
@@ -65,6 +72,26 @@ export class GraphUI {
       ready: function () {
         self.gv = this;
 
+        self.gv.nodes().dblclick(function (event) {
+          event.stopPropagation();
+          try {
+            self.highlightSchemaBanner(this)
+          } catch(e) {
+            console.log(e)
+          }
+          const set = $();
+          set.push(this);
+          // const obj = { set, direction: "bidirectional" };
+          const schemaName = event.currentTarget.dataset.name;
+          // self.currentSelection = [obj];
+          if (schemaName) {
+            try {
+              self.options.onSchemaClick(schemaName);
+            } catch (e) {
+              console.warn("onSchemaClick callback failed", e);
+            }
+          }
+        });
         self.gv.nodes().click(function (event) {
           const set = $();
           set.push(this);
@@ -83,12 +110,10 @@ export class GraphUI {
           } else {
             self.currentSelection = [obj];
             self._highlight();
-            if (schemaName) {
-              try {
-                self.options.onSchemaClick(schemaName);
-              } catch (e) {
-                console.warn("onSchemaClick callback failed", e);
-              }
+            try {
+              self.options.resetCb();
+            } catch (e) {
+              console.warn("resetCb callback failed", e);
             }
           }
         });
@@ -107,28 +132,34 @@ export class GraphUI {
 
         // svg 背景点击高亮清空
 
-        $(document).off('click.graphui').on('click.graphui', function (evt) {
-          // 如果点击目标不在 graph 容器内，直接退出
-          const graphContainer = $(self.selector)[0];
-          if (!graphContainer || !evt.target || !graphContainer.contains(evt.target)) {
-            return;
-          }
+        $(document)
+          .off("click.graphui")
+          .on("click.graphui", function (evt) {
+            // 如果点击目标不在 graph 容器内，直接退出
+            const graphContainer = $(self.selector)[0];
+            if (
+              !graphContainer ||
+              !evt.target ||
+              !graphContainer.contains(evt.target)
+            ) {
+              return;
+            }
 
-          let isNode = false;
-          const $nodes = self.gv.nodes();
-          const node = evt.target.parentNode;
-          $nodes.each(function () {
-            if (this === node) {
-              isNode = true;
+            let isNode = false;
+            const $nodes = self.gv.nodes();
+            const node = evt.target.parentNode;
+            $nodes.each(function () {
+              if (this === node) {
+                isNode = true;
+              }
+            });
+            if (!isNode && self.gv) {
+              self.gv.highlight();
+              if (self.options.resetCb) {
+                self.options.resetCb();
+              }
             }
           });
-          if (!isNode && self.gv) {
-            self.gv.highlight();
-            if (self.options.resetCb) {
-              self.options.resetCb();
-            }
-          }
-        });
 
         $(document).on("keydown.graphui", function (evt) {
           if (evt.keyCode === 27 && self.gv) {

{fastapi_voyager-0.10.3 → fastapi_voyager-0.10.5}/src/fastapi_voyager/web/index.html

@@ -64,7 +64,7 @@
     <div id="q-app">
       <q-layout view="hHh lpR fff">
         <q-header bordered class="bg-primary text-white">
-          <q-toolbar class="row text-grey-9 bg-white" style="width: 100%">
+          <q-toolbar class="row text-grey-9 bg-white" style="width: 100%; border-bottom: 2px solid #009485;">
             <div
               class="col-auto text-primary"
               style="font-size: 18px; font-weight: bold; display: flex; align-items: baseline;"
@@ -86,39 +86,21 @@
               />
             </div>
             <div class="col-auto q-ml-auto">
-              <q-toggle
-                v-if="state.enableBriefMode"
-                class="q-mr-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"
-                class="q-mr-md"
-                dense
-              />
-            </div>
-            <div class="col-auto">
               <q-btn
                 outline
                 @click="onReset"
                 title="may be very slow"
-                class="q-mr-md"
-                label="Show All"
+                icon="border_all"
+                flat
+                class="q-mr-sm"
+                label="Full Graph"
               />
             </div>
             <div class="col-auto">
               <q-btn
                 outline
                 icon="search"
+                flat
                 label="Search"
                 class="q-mr-md"
                 @click="showDialog()"
@@ -131,7 +113,7 @@
                 flat
                 icon="help_outline"
                 aria-label="Help"
-                class="q-mr-sm"
+                style="margin-right: 40px"
               >
                 <q-tooltip
                   anchor="bottom middle"
@@ -145,18 +127,16 @@
                     <ul>
                       <li>scroll to zoom in/out</li>
                       <li>
-                        click node to check highlight related nodes on the
-                        chart, esc to unselect
+                        double click node to view details.
                       </li>
                       <li>
-                        shift + click to see schema's dependencies without
-                        unrelated nodes
+                        shift + click to see schema's dependencies without unrelated nodes.
                       </li>
                     </ul>
                   </div>
                 </q-tooltip>
               </q-btn>
-            </div>
+            <a href="https://github.com/allmonday/fastapi-voyager" target="_blank" class="github-corner" aria-label="View source on GitHub"><svg width="52" height="52" viewBox="0 0 250 250" style="fill:#009485; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"/><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"/><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"/></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style></div>
             <!-- <q-toolbar-title class="text-primary row">
             </q-toolbar-title> -->
           </q-toolbar>
@@ -167,7 +147,6 @@
           :width="state.drawerWidth"
           side="right"
           style="border-left: 1px solid #888;"
-          overlay
           bordered
         >
           <!-- 可拖拽的调整栏 -->
@@ -232,14 +211,13 @@
                       content-class="q-pa-none"
                     >
                       <template #header>
-                        <div class="row items-center" style="width: 100%">
-                          <div class="row items-center">
+                        <div class="" style="white-space: nowrap; width: 100%">
                             <q-icon
+                              style="vertical-align: top;"
                               class="q-mr-sm"
                               :name="state.tag == tag.name ? 'folder' : 'folder_open'"
                             ></q-icon>
-                            <span>{{ tag.name }} <q-chip class="q-ml-sm" dense>{{ tag.routes.length }}</q-chip></span>
-                          </div>
+                            <span>{{ tag.name }} <q-chip style="position:relative; top: -1px;" class="q-ml-sm" dense>{{ tag.routes.length }}</q-chip></span>
                         </div>
                       </template>
                         <q-list separator style="overflow: auto; max-height: 60vh;">
@@ -280,15 +258,34 @@
             <template #after>
               <div style="position: relative; width: 100%; height: 100%;">
                 <div id="graph" class="adjust-fit"></div>
-                <q-toggle
-                  v-model="state.focus"
-                  v-show="schemaCodeName"
-                  @update:model-value="val => onFocusChange(val)"
-                  label="Focus"
-                  title="pick a schema and toggle focus on to display related nodes only"
-                  style="position: absolute; left: 8px; bottom: 8px; z-index: 10; background: rgba(255,255,255,0.85); border-radius: 4px; padding: 2px 8px;"
-                  size="sm"
-                />
+                <div style="position: absolute; left: 8px; bottom: 8px; z-index: 10; background: rgba(255,255,255,0.85); border-radius: 4px; padding: 2px 8px;">
+                  <div>
+                    <q-toggle
+                      v-model="state.focus"
+                      v-show="schemaCodeName"
+                      @update:model-value="val => onFocusChange(val)"
+                      label="Focus"
+                      title="pick a schema and toggle focus on to display related nodes only"
+                    />
+                  </div>
+                  <div>
+                    <q-toggle
+                      v-if="state.enableBriefMode"
+                      v-model="state.brief"
+                      label="Brief Mode"
+                      @update:model-value="(val) => toggleBrief(val)"
+                      title="skip middle classes, config module_prefix to enable it"
+                    />
+                  </div>
+                  <div>
+                    <q-toggle
+                      v-model="state.hidePrimitiveRoute"
+                      @update:model-value="(val) => toggleHidePrimitiveRoute(val)"
+                      label="Hide Primitive"
+                      title="hide routes return primitive"
+                    />
+                  </div>
+                </div>
               </div>
             </template>
           </q-splitter>

{fastapi_voyager-0.10.3 → fastapi_voyager-0.10.5}/src/fastapi_voyager/web/vue-main.js

@@ -48,6 +48,7 @@ const app = createApp({
     const schemaCodeName = ref("");
     const routeCodeId = ref("");
     const showRouteDetail = ref(false);
+    let graphUI = null;
 
     function openDetail() {
       showDetail.value = true;
@@ -88,17 +89,18 @@ const app = createApp({
 
     async function onFocusChange(val) {
       if (val) {
-        await onGenerate(false, schemaCodeName.value)
+        await onGenerate(true); // target could be out of view when switchingfrom big to small
       } else {
-        await onGenerate(false, null)
+        await onGenerate(false);
         setTimeout(() => {
-          const ele = $(`[data-name='${schemaCodeName.value}'] polygon`)
-          ele.click()
-        }, 1)
+          const ele = $(`[data-name='${schemaCodeName.value}'] polygon`);
+          ele.dblclick();
+        }, 1);
       }
     }
 
-    async function onGenerate(resetZoom = true, schema_name = null) {
+    async function onGenerate(resetZoom = true) {
+      const schema_name = state.focus ? schemaCodeName.value : null;
       state.generating = true;
       try {
         const payload = {
@@ -117,30 +119,31 @@ const app = createApp({
         const dotText = await res.text();
 
         // create graph instance once
-        const graphUI = new GraphUI("#graph", {
-          onSchemaShiftClick: (id) => {
-            if (state.rawSchemas.has(id)) {
-              resetDetailPanels()
-              schemaFieldFilterSchema.value = id;
-              showSchemaFieldFilter.value = true;
-            }
-          },
-          onSchemaClick: (id) => {
-            resetDetailPanels()
-            if (state.rawSchemas.has(id)) {
-              schemaCodeName.value = id;
-              state.detailDrawer = true;
-            }
-            if (id in state.routeItems) {
-              routeCodeId.value = id;
-              showRouteDetail.value = true;
-            }
-          },
-          resetCb: () => {
-            resetDetailPanels()
-          }
-        });
-
+        if (!graphUI) {
+          graphUI = new GraphUI("#graph", {
+            onSchemaShiftClick: (id) => {
+              if (state.rawSchemas.has(id)) {
+                resetDetailPanels();
+                schemaFieldFilterSchema.value = id;
+                showSchemaFieldFilter.value = true;
+              }
+            },
+            onSchemaClick: (id) => {
+              resetDetailPanels();
+              if (state.rawSchemas.has(id)) {
+                schemaCodeName.value = id;
+                state.detailDrawer = true;
+              }
+              if (id in state.routeItems) {
+                routeCodeId.value = id;
+                showRouteDetail.value = true;
+              }
+            },
+            resetCb: () => {
+              resetDetailPanels();
+            },
+          });
+        }
         await graphUI.render(dotText, resetZoom);
       } catch (e) {
         console.error("Generate failed", e);
@@ -212,9 +215,9 @@ const app = createApp({
     }
 
     function resetDetailPanels() {
-      state.detailDrawer = false
+      state.detailDrawer = false;
       showRouteDetail.value = false;
-      schemaCodeName.value = ''
+      schemaCodeName.value = "";
     }
 
     async function onReset() {
@@ -223,8 +226,8 @@ const app = createApp({
       state.schemaId = null;
       // state.showFields = "object";
       state.brief = false;
-      state.focus = false
-      schemaCodeName.value = ''
+      state.focus = false;
+      schemaCodeName.value = "";
       onGenerate();
     }
 
@@ -233,11 +236,11 @@ const app = createApp({
         state._tag = tagName;
         state.tag = tagName;
         state.routeId = "";
-        state.focus = false
-        schemaCodeName.value = ''
+        state.focus = false;
+        schemaCodeName.value = "";
         onGenerate();
       } else {
-        state._tag = null
+        state._tag = null;
       }
 
       state.detailDrawer = false;
@@ -252,8 +255,8 @@ const app = createApp({
       }
       state.detailDrawer = false;
       showRouteDetail.value = false;
-      state.focus = false
-      schemaCodeName.value = ''
+      state.focus = false;
+      schemaCodeName.value = "";
       onGenerate();
     }
 
@@ -275,24 +278,24 @@ const app = createApp({
     function startDragDrawer(e) {
       const startX = e.clientX;
       const startWidth = state.drawerWidth;
-      
+
       function onMouseMove(moveEvent) {
-        const deltaX = startX - moveEvent.clientX; 
+        const deltaX = startX - moveEvent.clientX;
         const newWidth = Math.max(300, Math.min(800, startWidth + deltaX));
         state.drawerWidth = newWidth;
       }
-      
+
       function onMouseUp() {
-        document.removeEventListener('mousemove', onMouseMove);
-        document.removeEventListener('mouseup', onMouseUp);
-        document.body.style.cursor = '';
-        document.body.style.userSelect = '';
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
       }
-      
-      document.addEventListener('mousemove', onMouseMove);
-      document.addEventListener('mouseup', onMouseUp);
-      document.body.style.cursor = 'col-resize';
-      document.body.style.userSelect = 'none';
+
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
       e.preventDefault();
     }
 
@@ -332,7 +335,7 @@ const app = createApp({
       renderCoreData,
       toggleShowField,
       startDragDrawer,
-      onFocusChange
+      onFocusChange,
     };
   },
 });

{fastapi_voyager-0.10.3 → fastapi_voyager-0.10.5}/tests/demo.py

@@ -98,6 +98,10 @@ def get_page_test_2():
 def get_page_test_3_long_long_long_name():
     return True
 
-@app.get("/page_test_4/", tags=['for-page', 'group_b'])
+@app.get("/page_test_4/", tags=['for-page'])
+def get_page_test_3_no_response_model():
+    return True
+
+@app.get("/page_test_5/", tags=['long_long_long_tag_name', 'group_b'])
 def get_page_test_3_no_response_model():
     return True