fastapi-voyager 0.12.5__py3-none-any.whl → 0.12.7__py3-none-any.whl

fastapi_voyager/server.py

@@ -34,6 +34,8 @@ def _build_ga_snippet(ga_id: str | None) -> str:
 
 INITIAL_PAGE_POLICY = Literal['first', 'full', 'empty']
 
+# ---------- setup ----------
+
 class OptionParam(BaseModel):
 	tags: list[Tag]
 	schemas: list[SchemaNode]
@@ -49,11 +51,21 @@ class Payload(BaseModel):
 	schema_field: str | None = None
 	route_name: str | None = None
 	show_fields: str = 'object'
-	show_meta: bool = False
 	brief: bool = False
 	hide_primitive_route: bool = False
 	show_module: bool = True
 
+# ---------- search ----------
+class SearchResultOptionParam(BaseModel):
+	tags: list[Tag]
+
+class SchemaSearchPayload(BaseModel):  # leave tag, route out
+	schema_name: str | None = None
+	schema_field: str | None = None
+	show_fields: str = 'object'
+	brief: bool = False
+	hide_primitive_route: bool = False
+	show_module: bool = True
 
 def create_voyager(
 	target_app: FastAPI,
@@ -91,6 +103,25 @@ def create_voyager(
 			swagger_url=swagger_url,
 			initial_page_policy=initial_page_policy)
 
+	@router.post("/dot-search", response_model=SearchResultOptionParam)
+	def get_search_dot(payload: SchemaSearchPayload):
+		voyager = Voyager(
+			schema=payload.schema_name,
+			schema_field=payload.schema_field,
+			show_fields=payload.show_fields,
+			module_color=module_color,
+			hide_primitive_route=payload.hide_primitive_route,
+			show_module=payload.show_module,
+		)
+		voyager.analysis(target_app)
+		tags = voyager.calculate_filtered_tag_and_route()
+
+		for t in tags:
+			t.routes.sort(key=lambda r: r.name)
+		tags.sort(key=lambda t: t.name)
+
+		return SearchResultOptionParam(tags=tags)
+
 	@router.post("/dot", response_class=PlainTextResponse)
 	def get_filtered_dot(payload: Payload) -> str:
 		voyager = Voyager(

fastapi_voyager/version.py

@@ -1,2 +1,2 @@
 __all__ = ["__version__"]
-__version__ = "0.12.5"
+__version__ = "0.12.7"

fastapi_voyager/voyager.py

@@ -297,6 +297,22 @@ class Voyager:
         else:
             return tags, routes, links
     
+    def calculate_filtered_tag_and_route(self):
+        _tags, _routes, _, _ = filter_graph(
+            schema=self.schema,
+            schema_field=self.schema_field,
+            tags=self.tags,
+            routes=self.routes,
+            nodes=self.nodes,
+            links=self.links,
+            node_set=self.node_set,
+        )
+        # filter tag.routes based by _routes
+        route_ids = {r.id for r in _routes}
+        for t in _tags:
+            t.routes = [r for r in t.routes if r.id in route_ids]
+        return _tags
+
     def render_dot(self):
         _tags, _routes, _nodes, _links = filter_graph(
             schema=self.schema,

fastapi_voyager/web/graph-ui.js

@@ -9,14 +9,31 @@ export class GraphUI {
     this._init();
   }
 
-  _highlight() {
+  _highlight(mode = "bidirectional") {
     let highlightedNodes = $();
     for (const selection of this.currentSelection) {
-      const nodes = this._getAffectedNodes(selection.set, "bidirectional");
+      const nodes = this._getAffectedNodes(selection.set, mode);
       highlightedNodes = highlightedNodes.add(nodes);
     }
     if (this.gv) {
       this.gv.highlight(highlightedNodes, true);
+      this.gv.bringToFront(highlightedNodes);
+    }
+  }
+
+  _highlightEdgeNodes() {
+    let highlightedNodes = $();
+    const [up, down, edge] = this.currentSelection
+    highlightedNodes = highlightedNodes.add(
+      this._getAffectedNodes(up.set, up.direction)
+    );
+    highlightedNodes = highlightedNodes.add(
+      this._getAffectedNodes(down.set, down.direction)
+    );
+    highlightedNodes = highlightedNodes.add(edge.set)
+    if (this.gv) {
+      this.gv.highlight(highlightedNodes, true);
+      this.gv.bringToFront(highlightedNodes);
     }
   }
 
@@ -65,6 +82,7 @@ export class GraphUI {
     }
   }
 
+
   _init() {
     const self = this;
     $(this.selector).graphviz({
@@ -93,13 +111,20 @@ export class GraphUI {
         });
 
         self.gv.edges().click(function (event) {
-          // const set = $();
-          // const downStreamNode = event.currentTarget.dataset.name.split("->")[1];
-          // const nodes = self.gv.nodesByName();
-          // set.push(nodes[downStreamNode]);
-          // const obj = { set, direction: "single" };
-          // self.currentSelection = [obj];
-          // todo highlight edge and downstream node
+          const up = $();
+          const down = $();
+          const edge = $();
+          const [upStreamNode, downStreamNode] = event.currentTarget.dataset.name.split("->");
+          const nodes = self.gv.nodesByName();
+          up.push(nodes[upStreamNode]);
+          down.push(nodes[downStreamNode]);
+          edge.push(this)
+          const upObj = { set: up, direction: "upstream" };
+          const downObj = { set: down, direction: "downstream" };
+          const edgeOjb = { set: edge, direction: "single"};
+          self.currentSelection = [upObj, downObj, edgeOjb];
+
+          self._highlightEdgeNodes();
         })
 
         self.gv.nodes().click(function (event) {
@@ -127,15 +152,6 @@ export class GraphUI {
           }
         });
 
-        self.gv.clusters().click(function (event) {
-          const set = $();
-          set.push(this);
-          const obj = { set, direction: "single" };
-          self.currentSelection = [obj];
-          self._highlight();
-        });
-
-        // click background to reset highlight 
         $(document)
           .off("click.graphui")
           .on("click.graphui", function (evt) {
@@ -150,9 +166,9 @@ export class GraphUI {
             }
 
             let isNode = false;
-            const $nodes = self.gv.nodes();
+            const $everything = self.gv.$nodes.add(self.gv.$edges).add(self.gv.$clusters);
             const node = evt.target.parentNode;
-            $nodes.each(function () {
+            $everything.each(function () {
               if (this === node) {
                 isNode = true;
               }

fastapi_voyager/web/graphviz.svg.js

@@ -21,6 +21,8 @@
     url: null,
     svg: null,
     shrink: "0.125pt",
+    edgeHitPadding: 12,
+    pointerCursor: true,
     tooltips: {
       init: function ($graph) {
         var $a = $(this);
@@ -168,9 +170,20 @@
     var that = this;
     var options = this.options;
 
+    if (type === "edge" && options.edgeHitPadding) {
+      this.ensureEdgeHitArea($el, options.edgeHitPadding);
+    }
+
+    if (options.pointerCursor && (type === "edge" || type === "node")) {
+      this.setInteractiveCursor($el, type === "edge");
+    }
+
     // save the colors of the paths, ellipses and polygons
     $el.find("polygon, ellipse, path").each(function () {
       var $this = $(this);
+      if ($this.attr("data-graphviz-hitbox") === "true") {
+        return;
+      }
       // save original colors
       $this.data("graphviz.svg.color", {
         fill: $this.attr("fill"),
@@ -314,6 +327,69 @@
     }
   };
 
+  GraphvizSvg.prototype.ensureEdgeHitArea = function ($edge, padding) {
+    var width = parseFloat(padding);
+    if (!isFinite(width) || width <= 0) {
+      return;
+    }
+    var $paths = $edge
+      .children("path")
+      .filter(function () {
+        return $(this).attr("data-graphviz-hitbox") !== "true";
+      });
+    if (!$paths.length) {
+      return;
+    }
+    $paths.each(function () {
+      var $path = $(this);
+      var $existing = $path.prev('[data-graphviz-hitbox="true"]');
+      if ($existing.length) {
+        $existing.attr("stroke-width", width);
+        return;
+      }
+      var clone = this.cloneNode(false);
+
+      /**
+       * gtp-5-codex:
+       * Cloning the edge paths without copying D3’s data binding caused those Cannot 
+       * read properties of undefined (reading 'key') errors when d3-graphviz re-rendered. 
+       * I now copy the original path’s bound datum (__data__) onto the transparent hitbox 
+       * clone inside ensureEdgeHitArea, so D3 still finds the expected metadata.
+       */
+      if (this.__data__) {
+        clone.__data__ = this.__data__;
+      }
+
+      var $clone = $(clone);
+      $clone.attr({
+        "data-graphviz-hitbox": "true",
+        stroke: "transparent",
+        fill: "none",
+        "stroke-width": width,
+      });
+      $clone.attr("pointer-events", "stroke");
+      $clone.css("pointer-events", "stroke");
+      if (!$clone.attr("stroke-linecap")) {
+        $clone.attr("stroke-linecap", $path.attr("stroke-linecap") || "round");
+      }
+      $clone.insertBefore($path);
+    });
+  };
+
+  GraphvizSvg.prototype.setInteractiveCursor = function ($el, isEdge) {
+    $el.css("cursor", "pointer");
+    var selectors = "path, polygon, ellipse, rect, text";
+    $el.find(selectors).each(function () {
+      $(this).css("cursor", "pointer");
+    });
+    if (isEdge) {
+      $el.children('[data-graphviz-hitbox="true"]').css("cursor", "pointer");
+    }
+    $el.find("a").each(function () {
+      $(this).css("cursor", "pointer");
+    });
+  };
+
   GraphvizSvg.prototype.convertToPx = function (val) {
     var retval = val;
     if (typeof val == "string") {
@@ -372,6 +448,9 @@
     var bg = this.$element.css("background");
     $el.find("polygon, ellipse, path").each(function () {
       var $this = $(this);
+      if ($this.attr("data-graphviz-hitbox") === "true") {
+        return;
+      }
       var color = $this.data("graphviz.svg.color");
       if (color.fill && color.fill != "none") {
         $this.attr("fill", getColor(color.fill, bg)); // don't set  fill if it's a path
@@ -386,6 +465,9 @@
   GraphvizSvg.prototype.restoreElement = function ($el) {
     $el.find("polygon, ellipse, path").each(function () {
       var $this = $(this);
+      if ($this.attr("data-graphviz-hitbox") === "true") {
+        return;
+      }
       var color = $this.data("graphviz.svg.color");
       if (color.fill && color.fill != "none") {
         $this.attr("fill", color.fill); // don't set  fill if it's a path

fastapi_voyager/web/index.html

@@ -120,24 +120,56 @@
               />
             </div>
             <div class="col-auto q-ml-auto">
+            </div>
+            <div class="col-auto row items-center q-gutter-sm">
+              <q-select
+                dense
+                outlined
+                use-input
+                fill-input
+                hide-selected
+                input-debounce="200"
+                v-model="store.state.search.schemaName"
+                :options="store.state.search.schemaOptions"
+                option-label="label"
+                option-value="value"
+                emit-value
+                map-options
+                style="min-width: 320px;"
+                clearable
+                label="Select schema"
+                @update:model-value="onSearchSchemaChange"
+                @filter="filterSearchSchemas"
+                @clear="resetSearch"
+              ></q-select>
+              
+              <q-select
+                dense
+                outlined
+                v-model="store.state.search.fieldName"
+                :disable="!store.state.search.schemaName || store.state.search.fieldOptions.length===0"
+                :options="store.state.search.fieldOptions"
+                style="min-width: 180px"
+                clearable
+                label="Select field (optional)"
+              ></q-select>
               <q-btn
                 outline
-                @click="onReset"
-                title="may be very slow"
-                icon="border_all"
+                icon="search"
                 flat
-                class="q-mr-sm"
-                label="Full Graph"
-              />
-            </div>
-            <div class="col-auto">
+                class="q-mr-none"
+                :disable="!store.state.search.schemaName"
+                :loading="store.state.generating"
+                @click="onSearch"
+              ></q-btn>
               <q-btn
                 outline
-                icon="search"
+                @click="onReset"
+                dense
+                title="full graph"
+                icon="border_all"
                 flat
-                label="Search"
-                class="q-mr-md"
-                @click="showSearchDialog()"
+                class="q-mr-sm"
               />
             </div>
             <div class="col-auto">
@@ -164,7 +196,7 @@
                         double click node to view details.
                       </li>
                       <li>
-                        shift + click to see schema's dependencies without unrelated nodes.
+                        shift + click to search the schema and highlight related nodes.
                       </li>
                     </ul>
                   </div>
@@ -183,7 +215,6 @@
           bordered
           overlay
         >
-          <!-- 可拖拽的调整栏 -->
           <div 
             @mousedown="startDragDrawer"
             style="
@@ -239,7 +270,7 @@
                       v-for="tag in store.state.leftPanel.tags"
                       :key="tag.name"
                       expand-separator
-                      :model-value="store.state.leftPanel._tag === tag.name"
+                      :model-value="store.state.leftPanel._tag === tag.name || store.state.search.mode"
                       @update:model-value="(val) => toggleTag(tag.name, val)"
                       :header-class="store.state.leftPanel.tag === tag.name ? 'text-primary text-bold' : ''"
                       content-class="q-pa-none"
@@ -299,7 +330,7 @@
               <div style="position: relative; width: 100%; height: 100%;">
                 <div id="graph" class="adjust-fit"></div>
                 <div style="position: absolute; left: 8px; top: 8px; z-index: 10; background: rgba(255,255,255,0.85); border-radius: 4px; padding: 2px 8px;">
-                  <div class="q-mt-sm">
+                  <div class="q-mt-sm" v-if="store.state.modeControl.briefModeEnabled && store.state.search.mode === false">
                     <q-toggle
                       v-if="store.state.modeControl.briefModeEnabled"
                       dense
@@ -309,7 +340,7 @@
                       title="skip middle classes, config module_prefix to enable it"
                     />
                   </div>
-                  <div class="q-mt-sm">
+                  <div class="q-mt-sm" v-if="store.state.modeControl.briefModeEnabled && store.state.search.mode === false">
                     <q-toggle
                       v-model="store.state.filter.hidePrimitiveRoute"
                       @update:model-value="(val) => toggleHidePrimitiveRoute(val)"
@@ -327,16 +358,6 @@
                       title="show module cluster"
                     />
                   </div>
-                  <div class="q-mt-sm">
-                    <q-toggle
-                      v-model="store.state.modeControl.focus"
-                      v-show="store.state.schemaDetail.schemaCodeName"
-                      @update:model-value="val => onFocusChange(val)"
-                      label="Focus"
-                      dense
-                      title="pick a schema and toggle focus on to display related nodes only"
-                    />
-                </div>
               </div>
             </template>
           </q-splitter>

fastapi_voyager/web/store.js

@@ -6,6 +6,9 @@ const state = reactive({
     },
 
     version: '',
+    config: {
+        initial_page_policy: 'first'
+    },
 
     swagger: {
         url: ''
@@ -38,13 +41,14 @@ const state = reactive({
         routeItems: []
     },
 
-    leftPanelFiltered: {
-
-    },
 
     // schema options, schema, fields
     search: {  
-     
+        mode: false,  
+        schemaName: null,
+        fieldName: null,
+        schemaOptions: [],
+        fieldOptions: [],
     },
 
 

fastapi_voyager/web/vue-main.js

@@ -1,16 +1,70 @@
-import SchemaFieldFilter from "./component/schema-field-filter.js";
 import SchemaCodeDisplay from "./component/schema-code-display.js";
 import RouteCodeDisplay from "./component/route-code-display.js";
-import Demo from './component/demo.js'
+import Demo from "./component/demo.js";
 import RenderGraph from "./component/render-graph.js";
 import { GraphUI } from "./graph-ui.js";
-import { store } from './store.js'
+import { store } from "./store.js";
 
-const { createApp, onMounted, ref } = window.Vue;
+const { createApp, onMounted, ref, watch } = window.Vue;
 
 const app = createApp({
   setup() {
     let graphUI = null;
+    const allSchemaOptions = ref([]);
+
+    const NBSP = String.fromCharCode(160);
+    const formatSchemaLabel = (name, id) =>
+      `${name}${NBSP}${NBSP}${NBSP}-${NBSP}${NBSP}${NBSP}${id}`;
+
+    function rebuildSchemaOptions() {
+      const dict = store.state.graph.schemaMap || {};
+      const opts = Object.values(dict).map((s) => ({
+        label: formatSchemaLabel(s.name, s.id),
+        value: s.id,
+      }));
+      allSchemaOptions.value = opts;
+      store.state.search.schemaOptions = opts.slice();
+      populateFieldOptions(store.state.search.schemaName);
+    }
+
+    function populateFieldOptions(schemaId) {
+      if (!schemaId) {
+        store.state.search.fieldOptions = [];
+        store.state.search.fieldName = null;
+        return;
+      }
+      const schema = store.state.graph.schemaMap?.[schemaId];
+      if (!schema) {
+        store.state.search.fieldOptions = [];
+        store.state.search.fieldName = null;
+        return;
+      }
+      const fields = Array.isArray(schema.fields)
+        ? schema.fields.map((f) => f.name)
+        : [];
+      store.state.search.fieldOptions = fields;
+      if (!fields.includes(store.state.search.fieldName)) {
+        store.state.search.fieldName = null;
+      }
+    }
+
+    function filterSearchSchemas(val, update) {
+      const needle = (val || "").toLowerCase();
+      update(() => {
+        if (!needle) {
+          store.state.search.schemaOptions = allSchemaOptions.value.slice();
+          return;
+        }
+        store.state.search.schemaOptions = allSchemaOptions.value.filter((option) =>
+          option.label.toLowerCase().includes(needle)
+        );
+      });
+    }
+
+    function onSearchSchemaChange(val) {
+      store.state.search.schemaName = val;
+      store.state.search.mode = false;
+    }
 
     function readQuerySelection() {
       if (typeof window === "undefined") {
@@ -55,7 +109,10 @@ const app = createApp({
 
     function applySelectionFromQuery(selection) {
       let applied = false;
-      if (selection.tag && store.state.leftPanel.tags.some((tag) => tag.name === selection.tag)) {
+      if (
+        selection.tag &&
+        store.state.leftPanel.tags.some((tag) => tag.name === selection.tag)
+      ) {
         store.state.leftPanel.tag = selection.tag;
         store.state.leftPanel._tag = selection.tag;
         applied = true;
@@ -72,6 +129,48 @@ const app = createApp({
       return applied;
     }
 
+    async function resetSearch() {
+      store.state.search.mode = false;
+      store.state.leftPanel.tag = null;
+      store.state.leftPanel._tag = null;
+      store.state.leftPanel.routeId = null;
+      await loadSearchedTags();
+      renderBasedOnInitialPolicy()
+    }
+
+    async function onSearch() {
+      store.state.search.mode = true;
+      store.state.leftPanel.tag = null;
+      store.state.leftPanel._tag = null;
+      store.state.leftPanel.routeId = null;
+      await loadSearchedTags();
+      await onGenerate();
+    }
+    async function loadSearchedTags() {
+      try {
+        const payload = {
+          schema_name: store.state.search.schemaName,
+          schema_field: store.state.search.fieldName || null,
+          show_fields: store.state.filter.showFields,
+          brief: store.state.filter.brief,
+          hide_primitive_route: store.state.filter.hidePrimitiveRoute,
+          show_module: store.state.filter.showModule,
+        };
+        const res = await fetch("dot-search", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(payload),
+        });
+        if (res.ok) {
+          const data = await res.json();
+          const tags = Array.isArray(data.tags) ? data.tags : [];
+          store.state.leftPanel.tags = tags;
+        }
+      } catch (err) {
+        console.error("dot-search failed", err);
+      }
+    }
+
     async function loadInitial() {
       store.state.initializing = true;
       try {
@@ -81,10 +180,8 @@ const app = createApp({
 
         const schemasArr = Array.isArray(data.schemas) ? data.schemas : [];
         // Build dict keyed by id for faster lookups and simpler prop passing
-        const schemaMap = Object.fromEntries(
-          schemasArr.map((s) => [s.id, s])
-        );
-        store.state.graph.schemaMap = schemaMap
+        const schemaMap = Object.fromEntries(schemasArr.map((s) => [s.id, s]));
+        store.state.graph.schemaMap = schemaMap;
         store.state.graph.schemaKeys = new Set(Object.keys(schemaMap));
         store.state.graph.routeItems = data.tags
           .map((t) => t.routes)
@@ -93,9 +190,12 @@ const app = createApp({
             acc[r.id] = r;
             return acc;
           }, {});
-        store.state.modeControl.briefModeEnabled = data.enable_brief_mode || false;
+        store.state.modeControl.briefModeEnabled =
+          data.enable_brief_mode || false;
         store.state.version = data.version || "";
-        store.state.swagger.url = data.swagger_url || null
+        store.state.swagger.url = data.swagger_url || null;
+
+        rebuildSchemaOptions();
 
         const querySelection = readQuerySelection();
         const restoredFromQuery = applySelectionFromQuery(querySelection);
@@ -104,19 +204,8 @@ const app = createApp({
           onGenerate();
           return;
         }
-
-        switch (data.initial_page_policy) {
-          case "full":
-            onGenerate()
-            return
-          case "empty":
-            return
-          case "first":
-            store.state.leftPanel.tag = store.state.leftPanel.tags.length > 0 ? store.state.leftPanel.tags[0].name : null;
-            store.state.leftPanel._tag = store.state.leftPanel.tag;
-            onGenerate();
-            return
-        }
+        store.state.config.initial_page_policy = data.initial_page_policy
+        renderBasedOnInitialPolicy()
 
         // default route options placeholder
       } catch (e) {
@@ -126,28 +215,40 @@ const app = createApp({
       }
     }
 
-    async function onFocusChange(val) {
-      if (val) {
-        await onGenerate(true); // target could be out of view when switchingfrom big to small
-      } else {
-        await onGenerate(false);
-        setTimeout(() => {
-          const ele = $(`[data-name='${store.state.schemaDetail.schemaCodeName}'] polygon`);
-          ele.dblclick();
-        }, 1);
-      }
+    async function renderBasedOnInitialPolicy() {
+        switch (store.state.config.initial_page_policy) {
+          case "full":
+            onGenerate();
+            return;
+          case "empty":
+            return;
+          case "first":
+            store.state.leftPanel.tag =
+              store.state.leftPanel.tags.length > 0
+                ? store.state.leftPanel.tags[0].name
+                : null;
+            store.state.leftPanel._tag = store.state.leftPanel.tag;
+            onGenerate();
+            return;
+        }
     }
 
     async function onGenerate(resetZoom = true) {
-      const schema_name = store.state.modeControl.focus ? store.state.schemaDetail.schemaCodeName : null;
+      const activeSchema = store.state.search.mode
+        ? store.state.search.schemaName
+        : null;
+      const activeField = store.state.search.mode
+        ? store.state.search.fieldName
+        : null;
       store.state.generating = true;
       try {
         const payload = {
           tags: store.state.leftPanel.tag ? [store.state.leftPanel.tag] : null,
-          schema_name: schema_name || null,
+          schema_name: activeSchema || null,
+          schema_field: activeField || null,
           route_name: store.state.leftPanel.routeId || null,
           show_fields: store.state.filter.showFields,
-          brief: store.state.modeControl.brief,
+          brief: store.state.filter.brief,
           hide_primitive_route: store.state.filter.hidePrimitiveRoute,
           show_module: store.state.filter.showModule,
         };
@@ -163,9 +264,9 @@ const app = createApp({
           graphUI = new GraphUI("#graph", {
             onSchemaShiftClick: (id) => {
               if (store.state.graph.schemaKeys.has(id)) {
-                resetDetailPanels();
-                store.state.searchDialog.show = true;
-                store.state.searchDialog.schema = id;
+                store.state.search.mode = true;
+                store.state.search.schemaName = id;
+                onSearch();
               }
             },
             onSchemaClick: (id) => {
@@ -192,14 +293,9 @@ const app = createApp({
       }
     }
 
-    function showSearchDialog() {
-      store.state.searchDialog.show = true;
-      store.state.searchDialog.schema = null;
-    }
-
     function resetDetailPanels() {
       store.state.rightDrawer.drawer = false;
-      store.state.routeDetail.show = false
+      store.state.routeDetail.show = false;
       store.state.schemaDetail.schemaCodeName = "";
     }
 
@@ -210,11 +306,14 @@ const app = createApp({
 
       store.state.graph.schemaId = null;
 
-      // state.showFields = "object";
-      store.state.modeControl.focus = false;
+      store.state.search.mode = false;
+      store.state.search.schemaName = null;
+      store.state.search.fieldName = null;
+      store.state.search.fieldOptions = [];
+      store.state.search.schemaOptions = allSchemaOptions.value.slice();
+
       store.state.schemaDetail.schemaCodeName = "";
-      onGenerate();
-      syncSelectionToUrl();
+      resetSearch()
     }
 
     function toggleTag(tagName, expanded = null) {
@@ -223,7 +322,6 @@ const app = createApp({
         store.state.leftPanel.tag = tagName;
         store.state.leftPanel.routeId = "";
 
-        store.state.modeControl.focus = false;
         store.state.schemaDetail.schemaCodeName = "";
         onGenerate();
       } else {
@@ -231,7 +329,7 @@ const app = createApp({
       }
 
       store.state.rightDrawer.drawer = false;
-      store.state.routeDetail.show = false
+      store.state.routeDetail.show = false;
       syncSelectionToUrl();
     }
 
@@ -242,8 +340,7 @@ const app = createApp({
         store.state.leftPanel.routeId = routeId;
       }
       store.state.rightDrawer.drawer = false;
-      store.state.routeDetail.show = false
-      store.state.modeControl.focus = false;
+      store.state.routeDetail.show = false;
       store.state.schemaDetail.schemaCodeName = "";
       onGenerate();
       syncSelectionToUrl();
@@ -251,7 +348,7 @@ const app = createApp({
 
     function toggleShowModule(val) {
       store.state.filter.showModule = val;
-      onGenerate()
+      onGenerate();
     }
 
     function toggleShowField(field) {
@@ -260,7 +357,7 @@ const app = createApp({
     }
 
     function toggleBrief(val) {
-      store.state.modeControl.brief = val;
+      store.state.filter.brief = val;
       onGenerate();
     }
 
@@ -293,24 +390,45 @@ const app = createApp({
       e.preventDefault();
     }
 
+    watch(
+      () => store.state.graph.schemaMap,
+      () => {
+        rebuildSchemaOptions();
+      },
+      { deep: false }
+    );
+
+    watch(
+      () => store.state.search.schemaName,
+      (schemaId) => {
+        store.state.search.schemaOptions = allSchemaOptions.value.slice();
+        populateFieldOptions(schemaId);
+        if (!schemaId) {
+          store.state.search.mode = false;
+        }
+      }
+    );
+
     onMounted(async () => {
-      document.body.classList.remove("app-loading")
+      document.body.classList.remove("app-loading");
       await loadInitial();
       // Reveal app content only after initial JS/data is ready
     });
 
     return {
       store,
+      onSearch,
+      resetSearch,
+      filterSearchSchemas,
+      onSearchSchemaChange,
       toggleTag,
       toggleBrief,
       toggleHidePrimitiveRoute,
       selectRoute,
       onGenerate,
       onReset,
-      showSearchDialog,
       toggleShowField,
       startDragDrawer,
-      onFocusChange,
       toggleShowModule,
     };
   },
@@ -323,10 +441,9 @@ if (window.Quasar && typeof window.Quasar.setCssVar === "function") {
   window.Quasar.setCssVar("primary", "#009485");
 }
 
-app.component("schema-field-filter", SchemaFieldFilter);  // shift click and see relationships
-app.component("schema-code-display", SchemaCodeDisplay);  // double click to see node details
-app.component("route-code-display", RouteCodeDisplay);  // double click to see route details
-app.component("render-graph", RenderGraph);   // for debug, render pasted dot content
-app.component('demo-component', Demo)
+app.component("schema-code-display", SchemaCodeDisplay); // double click to see node details
+app.component("route-code-display", RouteCodeDisplay); // double click to see route details
+app.component("render-graph", RenderGraph); // for debug, render pasted dot content
+app.component("demo-component", Demo);
 
 app.mount("#q-app");

{fastapi_voyager-0.12.5.dist-info → fastapi_voyager-0.12.7.dist-info}/METADATA

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: fastapi-voyager
-Version: 0.12.5
+Version: 0.12.7
 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

{fastapi_voyager-0.12.5.dist-info → fastapi_voyager-0.12.7.dist-info}/RECORD

@@ -3,24 +3,23 @@ fastapi_voyager/cli.py,sha256=td3yIIigEomhSdDO-Xkh-CgpEwCafwlwnpvxnT9QsBo,10488
 fastapi_voyager/filter.py,sha256=AN_HIu8-DtKisIq5mFt7CnqRHtxKewedNGyyaI82hSY,11529
 fastapi_voyager/module.py,sha256=h9YR3BpS-CAcJW9WCdVkF4opqwY32w9T67g9GfdLytk,3425
 fastapi_voyager/render.py,sha256=7jSChISqTV2agaO55thhwyrOhqVOMux4x7k8rSQROnU,9960
-fastapi_voyager/server.py,sha256=MZNRpcXor2q8Rj3OSf6EH8NkgDChxfzUtnIY8ilRkaY,7053
+fastapi_voyager/server.py,sha256=wwCFl1eeq_jn8nfIwcy7s8Sh6MB55SN8u9AsJRnkFWQ,7979
 fastapi_voyager/type.py,sha256=7EL1zaIwKVRGpLig7fqaOrZGN5k0Rm31C9COfck3CSs,1750
 fastapi_voyager/type_helper.py,sha256=JXD_OE_xTARkGjWDsnO_xfvyZ0vcwViYyqCp6oEHBTM,9719
-fastapi_voyager/version.py,sha256=0gsRRMzt46OBC-7IuF0VTu6UPwKs_X7qmw7KMjDhIeo,49
-fastapi_voyager/voyager.py,sha256=LiRUb0ZG2cfnyY_pwRqoeZjxb6Pu6xy_lqPiMupxoKM,13510
-fastapi_voyager/web/graph-ui.js,sha256=NiwUFHCZPE4C-Hx4qwFvHwPyXw_lu2ar3WnPkmVGQN0,5850
+fastapi_voyager/version.py,sha256=z8XZy0W66ufD2jmi9zvVlH2vjRJoy4CC-ZR7EhfBej8,49
+fastapi_voyager/voyager.py,sha256=qJZvkLh5W_18X5B4pJ8XYbytx2Wvcz-0OnYoHWw8XlA,14046
+fastapi_voyager/web/graph-ui.js,sha256=wxKjmVEpaMJZXMTW7tJ4BiaACCI1oVN6cx7hSMI0K5U,6428
 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=3HixCgVF9VtTx89G3usDXpEh7NZnLk_p9siz4OUVUHE,17444
+fastapi_voyager/web/graphviz.svg.js,sha256=wZwz_lBztoXmujEN21P0w-HMpdmbqPwTQQ6Ebxd9rGo,18569
+fastapi_voyager/web/index.html,sha256=L2xt6T-b4V6WnYnZ_MkmduDQLzFPxfRLhHuiaG9QnGU,18362
 fastapi_voyager/web/quasar.min.css,sha256=F5jQe7X2XT54VlvAaa2V3GsBFdVD-vxDZeaPLf6U9CU,203145
 fastapi_voyager/web/quasar.min.js,sha256=h0ftyPMW_CRiyzeVfQqiup0vrVt4_QWojpqmpnpn07E,502974
-fastapi_voyager/web/store.js,sha256=fW-3uUwWNUsW8vXbTqltHvvlIroBeZTJvFkMSjuWdVg,1630
-fastapi_voyager/web/vue-main.js,sha256=H50LbB-g3jWaz3Xv2O8RgajlibjtoiHu1HDTumjf7sY,10766
+fastapi_voyager/web/store.js,sha256=ul6I00XqT9FByAD20JgO2mzdbYCZhTI-CP5t0g_k6yo,1776
+fastapi_voyager/web/vue-main.js,sha256=LoMVDcU4KSTw3mcquI3g3xJT8ChcQtiyC1rGV79tpUA,14208
 fastapi_voyager/web/component/demo.js,sha256=bQb16Un4XZ3Mf8qL6gvyrXe_mmA3V3mSIRMQAWg2MNk,352
 fastapi_voyager/web/component/render-graph.js,sha256=e8Xgh2Kl-nYU0P1gstEmAepCgFnk2J6UdxW8TlMafGs,2322
 fastapi_voyager/web/component/route-code-display.js,sha256=8NJPPjNRUC21gjpY8XYEQs4RBbhX1pCiqEhJp39ku6k,3678
 fastapi_voyager/web/component/schema-code-display.js,sha256=qKUMV2RFQzR8deof2iC4vyp65UaWadtVsDAXjY-i3vE,7042
-fastapi_voyager/web/component/schema-field-filter.js,sha256=i6Zp02wfSBWQb4AJ7H_Q9vgCVzLaVnH1I2JIot0sV-0,6172
 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
@@ -28,8 +27,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.12.5.dist-info/METADATA,sha256=QO3zauma0JaAR_DyhX5yQqNkDf868_2cAw1mHHKY3o0,6523
-fastapi_voyager-0.12.5.dist-info/WHEEL,sha256=WLgqFyCfm_KASv4WHyYy0P3pM_m7J5L9k2skdKLirC8,87
-fastapi_voyager-0.12.5.dist-info/entry_points.txt,sha256=pEIKoUnIDXEtdMBq8EmXm70m16vELIu1VPz9-TBUFWM,53
-fastapi_voyager-0.12.5.dist-info/licenses/LICENSE,sha256=lNVRR3y_bFVoFKuK2JM8N4sFaj3m-7j29kvL3olFi5Y,1067
-fastapi_voyager-0.12.5.dist-info/RECORD,,
+fastapi_voyager-0.12.7.dist-info/METADATA,sha256=ZsBh0iYCI0KSjBlTW_WQuwBglfwNHpSIrjZee3u4eUg,6523
+fastapi_voyager-0.12.7.dist-info/WHEEL,sha256=WLgqFyCfm_KASv4WHyYy0P3pM_m7J5L9k2skdKLirC8,87
+fastapi_voyager-0.12.7.dist-info/entry_points.txt,sha256=pEIKoUnIDXEtdMBq8EmXm70m16vELIu1VPz9-TBUFWM,53
+fastapi_voyager-0.12.7.dist-info/licenses/LICENSE,sha256=lNVRR3y_bFVoFKuK2JM8N4sFaj3m-7j29kvL3olFi5Y,1067
+fastapi_voyager-0.12.7.dist-info/RECORD,,

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

@@ -1,190 +0,0 @@
-import { GraphUI } from "../graph-ui.js";
-const { defineComponent, reactive, ref, onMounted, nextTick, watch } =
-  window.Vue;
-
-// SchemaFieldFilter component
-// Features:
-//  - Fetch initial schemas list (GET /dot) and build schema options
-//  - Second selector lists fields of the chosen schema
-//  - Query button disabled until a schema is selected
-//  - On query: POST /dot with schema_name + optional schema_field; render returned DOT in #graph-schema-field
-//  - Uses GraphUI once and re-renders
-//  - Emits 'queried' event after successful render (payload: { schemaName, fieldName })
-export default defineComponent({
-  name: "SchemaFieldFilter",
-  props: {
-    schemaName: { type: String, default: null }, // external injection triggers auto-query
-    schemas: { type: Object, default: () => ({}) },
-  },
-  emits: ["queried", "close"],
-  setup(props, { emit }) {
-    const state = reactive({
-      loadingSchemas: false,
-      querying: false,
-      schemas: [], // [{ name, fullname, fields: [{name,...}] }]
-      schemaOptions: [], // [{ label, value }]
-      fieldOptions: [], // [ field.name ]
-      schemaFullname: null,
-      fieldName: null,
-      error: null,
-      showFields: "object",
-      showFieldOptions: [
-        { label: "No fields", value: "single" },
-        { label: "Object fields", value: "object" },
-        { label: "All fields", value: "all" },
-      ],
-    });
-
-    let graphInstance = null;
-    let lastAppliedExternal = null;
-
-    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 : {};
-      // 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,
-      }));
-      // Maintain compatibility: loadingSchemas flag toggled quickly (no async work)
-      state.loadingSchemas = false;
-    }
-
-    function onFilterSchemas(val, update) {
-      const needle = (val || "").toLowerCase();
-      update(() => {
-        let opts = state.schemas.map((s) => ({
-          label: `${s.name} - ${s.id}`,
-          value: s.id,
-        }));
-        if (needle) {
-          opts = opts.filter((o) => o.label.toLowerCase().includes(needle));
-        }
-        state.schemaOptions = opts;
-      });
-    }
-
-    function onSchemaChange(val) {
-      state.schemaFullname = val;
-      state.fieldName = null;
-      const schema = state.schemas.find((s) => s.id === val);
-      state.fieldOptions = schema ? schema.fields.map((f) => f.name) : [];
-    }
-
-    async function onQuery() {
-      if (!state.schemaFullname) return;
-      state.querying = true;
-      state.error = null;
-      try {
-        const payload = {
-          schema_name: state.schemaFullname,
-          schema_field: state.fieldName || null,
-          show_fields: state.showFields,
-        };
-        const res = await fetch("dot", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify(payload),
-        });
-        const dotText = await res.text();
-        if (!graphInstance) {
-          graphInstance = new GraphUI("#graph-schema-field");
-        }
-        await graphInstance.render(dotText);
-        emit("queried", {
-          schemaName: state.schemaFullname,
-          fieldName: state.fieldName,
-        });
-      } catch (e) {
-        state.error = "Query failed";
-        console.error("SchemaFieldFilter query failed", e);
-      } finally {
-        state.querying = false;
-      }
-    }
-
-    function applyExternalSchema(name) {
-      if (!name || !state.schemas.length) return;
-      if (lastAppliedExternal === name) return; // avoid duplicate
-      const schema = state.schemas.find((s) => s.id === name);
-      if (!schema) return;
-      state.schemaFullname = schema.id;
-      state.fieldOptions = schema.fields.map((f) => f.name);
-      state.fieldName = null; // reset field for external injection
-      lastAppliedExternal = name;
-      // auto query
-      onQuery();
-    }
-
-    onMounted(async () => {
-      await nextTick();
-      await loadSchemas();
-      if (props.schemaName) {
-        applyExternalSchema(props.schemaName);
-      }
-    });
-
-    function close() {
-      emit("close");
-    }
-
-    return { state, onSchemaChange, onQuery, close, onFilterSchemas };
-  },
-  template: `
-	<div style="height:100%; position:relative; background:#fff;">
-				<div style="position:absolute; top:8px; left:8px; z-index:10; background:rgba(255,255,255,0.95); padding:8px 10px; border-radius:4px; box-shadow:0 1px 3px rgba(0,0,0,0.15);" class="q-gutter-sm row items-center">
-			<q-select 
-				dense outlined use-input input-debounce="0"
-				v-model="state.schemaFullname"
-				:options="state.schemaOptions"
-				option-label="label"
-				option-value="value"
-				emit-value 
-        map-options
-				:loading="state.loadingSchemas"
-				style="min-width:220px"
-				clearable
-				label="Select schema"
-				@update:model-value="onSchemaChange"
-        @filter="onFilterSchemas"
-			/>
-			<q-select 
-				dense outlined
-				v-model="state.fieldName"
-				:disable="!state.schemaFullname || state.fieldOptions.length===0"
-				:options="state.fieldOptions"
-				style="min-width:180px"
-				clearable
-				label="Select field (optional)"
-			/>
-					<q-option-group
-						v-model="state.showFields"
-						:options="state.showFieldOptions"
-						type="radio"
-						inline
-						dense
-						color="primary"
-						style="min-width:260px"
-					/>
-			<q-btn 
-          class="q-ml-md"
-          icon="search"
-				  label="Search" 
-          outline
-				:disable="!state.schemaFullname" 
-				:loading="state.querying" 
-				@click="onQuery" />
-				<q-btn
-					flat dense round icon="close"
-					aria-label="Close"
-					@click="close"
-				/>
-		</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>
-	`,
-});