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

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

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: fastapi-voyager
-Version: 0.10.4
+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
@@ -246,6 +246,8 @@ or you can open router_viz.dot with vscode extension `graphviz interactive previ
     - [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
@@ -256,6 +258,10 @@ or you can open router_viz.dot with vscode extension `graphviz interactive previ
     - 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.4 → fastapi_voyager-0.10.5}/README.md

@@ -219,6 +219,8 @@ or you can open router_viz.dot with vscode extension `graphviz interactive previ
     - [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
@@ -229,6 +231,10 @@ or you can open router_viz.dot with vscode extension `graphviz interactive previ
     - 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.4 → 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.4 → fastapi_voyager-0.10.5}/src/fastapi_voyager/version.py

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

{fastapi_voyager-0.10.4 → 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.4 → 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.4 → fastapi_voyager-0.10.5}/src/fastapi_voyager/web/index.html

@@ -127,12 +127,10 @@
                     <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>
@@ -149,7 +147,6 @@
           :width="state.drawerWidth"
           side="right"
           style="border-left: 1px solid #888;"
-          overlay
           bordered
         >
           <!-- 可拖拽的调整栏 -->

{fastapi_voyager-0.10.4 → 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,13 +89,13 @@ const app = createApp({
 
     async function onFocusChange(val) {
       if (val) {
-        await onGenerate(false)
+        await onGenerate(true); // target could be out of view when switchingfrom big to small
       } else {
-        await onGenerate(false)
+        await onGenerate(false);
         setTimeout(() => {
-          const ele = $(`[data-name='${schemaCodeName.value}'] polygon`)
-          ele.click()
-        }, 1)
+          const ele = $(`[data-name='${schemaCodeName.value}'] polygon`);
+          ele.dblclick();
+        }, 1);
       }
     }
 
@@ -118,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);
@@ -213,9 +215,9 @@ const app = createApp({
     }
 
     function resetDetailPanels() {
-      state.detailDrawer = false
+      state.detailDrawer = false;
       showRouteDetail.value = false;
-      schemaCodeName.value = ''
+      schemaCodeName.value = "";
     }
 
     async function onReset() {
@@ -224,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();
     }
 
@@ -234,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;
@@ -253,8 +255,8 @@ const app = createApp({
       }
       state.detailDrawer = false;
       showRouteDetail.value = false;
-      state.focus = false
-      schemaCodeName.value = ''
+      state.focus = false;
+      schemaCodeName.value = "";
       onGenerate();
     }
 
@@ -276,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();
     }
 
@@ -333,7 +335,7 @@ const app = createApp({
       renderCoreData,
       toggleShowField,
       startDragDrawer,
-      onFocusChange
+      onFocusChange,
     };
   },
 });